How to set height of list items in HTML?

Question

Here is my code:

HTML

Click to copy

<div class="menu">
    <ul>
      <li class="active"><a href="index.html">HOME</a></li>
      <li class="active"><a href="#">COMPANY</a></li>
      <li class="active"><a href="#">SOLUTIONS</a></li>
      <li class="active"><a href="#">SERVICES</a></li>
      <li class="active"><a href="#">NEWS & EVENTS</a></li>
      <li class="active"><a href="#">BLOGS</a></li>
      <li class="active"><a href="#">CONTACTS</a></li>
    </ul>
  </div>

CSS

Click to copy

.header .menu ul { margin:33px 10px 0 0; padding:0; float:right; width:auto; height:12px; list-style:none;}
.header .menu ul li { margin:0 4px; float:left;}

It does not recognize the height feature. Why? How can I set the height of menu item?

Answer 1

You're missing a semicolon :-)

You can also try setting the line-height property of the li tags to change the position of the text in the element:

Click to copy

.line-height-li {
    line-height: 30px;
}