How to set the height of list items in HTML?

Question

Here is my code:

HTML

<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

 .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 function. What for? How to set the height of a menu item?

Answer 1

You are missing a semicolon :-)

You can also try setting the line-height property for li tags to reposition the text in the element.

Answer 2

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

Answer 3

ul is set to 12 pixels high, at least in Firefox.

Answer 4

Is the height set to the correct item? You ask how to set the height of the menu item (presumably li ), but your CSS says that you set the height of ul . Perhaps moving height: 12px; can help height: 12px; from where it should .header .menu ul li .