I am having some trouble with creating a menu panel. I have set the height for both the li and menu div to be the same, but there appears to be a margin at the bottom of the li. I would like the li to completely fill the menu height.
Any help is greatly appreciated!
Here is an example of how I would like it to look:
Here are 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>