How to set height of list items in HTML? - html

Question

Here is my code:
HTML
<div class="menu">
<ul>
<li class="active">HOME</li>
<li class="active">COMPANY</li>
<li class="active">SOLUTIONS</li>
<li class="active">SERVICES</li>
<li class="active">NEWS & EVENTS</li>
<li class="active">BLOGS</li>
<li class="active">CONTACTS</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 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:
.line-height-li {
line-height: 30px;
}

Answer 2

Just increase the padding-top and padding-bottom as you want. Line height effect other. I found out it by testing it. It work for me.

Answer 3

.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 4

ul is set to a height of 12 pixels, at least in Firefox.

Answer 5

Is the height set on the correct element? You're asking how to set the height of a menu item (presumably, an li) but your CSS says you're setting the height of the ul. Perhaps, moving height: 12px; from where it is to .header .menu ul li could help.

Answer 6

The height of the list does not necessarily change the height of the visible list items. I created a small example to show how those heights look like, if you hover on the items, you'll see the height's changing. That because of the overflow attribute of the list.
.menu ul {
margin: 10px 10px 10px 5px;
padding: 10px;
float: right;
width: auto;
height: 12px;
list-style: none;
background: cyan;
overflow: hidden;
}
.menu ul:hover {
overflow: visible;
}
.menu ul li {
margin: 4px;
padding: 4px;
float: left;
background: yellow;
}
<div class="menu">
<ul>
<li class="active">HOME</li>
<li class="active">COMPANY</li>
<li class="active">SOLUTIONS</li>
<li class="active">SERVICES</li>
<li class="active">NEWS & EVENTS</li>
<li class="active">BLOGS</li>
<li class="active">CONTACTS</li>
</ul>
</div>
Anyway, in your example, there's no div with a class "header" in your HTML, that's confusing for beginners. Your CSS rules begin with ".header".