Creating menu bar in css/html

Question

I am learning html/css and I am stuck in creating a menu bar with drop down list which shows on hover. The code is written below. The problem is the drop down menu is not shown when i hover the mouse over it. Please help me out with whats wrong?

CSS:

#hi{background-color:grey;}
#hi ul{color:white; list-style-type:none; position:relative; }
#hi ul li{display:inline-block;}
#hi ul li:hover {background-color:orange;}
#hi ul li:hover ul{display:block;}
#hi ul ul{display:none; position:absolute;}

Code:

<div id="hi">
<ul>
    <li>A</li>
        <ul><li>b</li>
        <li>c</li>
        <li>d</li>
        </ul>
    <li>E</li>
        <ul><li>f</li>
        <li>g</li>
        <li>h</li>
        </ul>

    <li>I</li>
        <ul><li>J</li>
        <li>k</li>
        <li>l</li>
        </ul>

</ul>   
</div>

Fahad Hasan · Accepted Answer · 2014-10-21 22:17:46Z

You should use this HTML structure:

<div id="hi">
      <ul>
        <li>A
          <ul>
            <li>b</li>
            <li>c</li>
            <li>d</li>
          </ul>
        </li>
        <li>E
          <ul>
            <li>f</li>
            <li>g</li>
            <li>h</li>
          </ul>
        </li>
        <li>I
          <ul>
            <li>J</li>
            <li>k</li>
            <li>l</li>
          </ul>
        </li>
      </ul>
    </div>

#hi {
  background-color: grey;
}
#hi ul {
  color: white;
  list-style-type: none;
  position: relative;
}
#hi ul li {
  display: inline-block;
}
#hi ul li:hover {
  background-color: orange;
}
#hi ul li ul {
  display: none;
  position: absolute;
}
#hi ul li:hover ul {
  display: block;
}
#hi ul li ul {
  background: black;
  padding: 2px;
}
#hi ul li ul li {
  display: block;
}

<div id="hi">
  <ul>
    <li>A
      <ul>
        <li>b</li>
        <li>c</li>
        <li>d</li>
      </ul>
    </li>
    <li>E
      <ul>
        <li>f</li>
        <li>g</li>
        <li>h</li>
      </ul>
    </li>
    <li>I
      <ul>
        <li>J</li>
        <li>k</li>
        <li>l</li>
      </ul>
    </li>
  </ul>
</div>

The ul containing the sub-menu wasn't appearing using your HTML structure because your sub-menu ul wasn't nested inside its parent <li>. The <ul> containing the sub-menu has to be a part of its parent <li> so that it appears when you place your cursor on the <li>.

Collectives™ on Stack Overflow

Creating menu bar in css/html

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related