Question

I am trying to create a menu panel.here is my menu.As you can see the height of li does not fit to the height of menu div.I have set same height for both but it appear having some margin with the bottom.I want to that li to fill the menu height.

Thank you for any help

like this :

here my codes

.menu {
  height: 30px;
  width: 780px;
  background-color: #09F;
}

.menu ul {
  float: left;
  list-style: none;
  margin-top: 0px;
  height: 30px;
}

.menu ul li {
  margin-left: 15px;
  height: 30px;
  background-color: #ccc;
  display: inline;
}

.menu ul li a {
  text-decoration: none;
}

<div class="menu">
  <ul>
    <li><a href="#">Create Account</a></li>
    <li><a href="#">Change Account</a></li>
  </ul>
</div>

Answer 1

You just need to change your CSS a little

.menu ul li {
    margin-left:15px;
    height:30px;
    background-color: #ccc;
    display:inline-block; 
    float:left;
}

change display:inline to display:inline-block