12

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 feature. Why? How can I set the height of menu item?

1
  • Amazing that this hasn't been answered yet :/
    – basickarl
    Apr 12, 2019 at 15:13

6 Answers 6

9

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;
}
0
1

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.

1
  • 1
    When you say "Line height effect other", then it is not much clear. You can say that height of any list item is not absolutely of that item, instead it is relative height with respect to top of list. Thus setting line-height or height will not work. Setting more padding top would move list item downwards and setting more padding bottom, moves content below list item downwards. Dec 11, 2020 at 18:03
0
.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;}
0

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

0

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.

0

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"><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 &amp; EVENTS</a></li>
    <li class="active"><a href="#">BLOGS</a></li>
    <li class="active"><a href="#">CONTACTS</a></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".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.