Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by nick88p
nick88p
5,716 Points

Sub Menus with CSS

Good day,

I am trying to create sub menus with CSS and it is not working for some reason. I understand the concept as I've watched several Youtube videos, but for some reason it doesn't translate into my project. Any help would be much appreciated.

  </head>
  <body>
    <nav id="main">
      <ul>
        <li><a href="Switzerland.html">Switzerland</a></li>
        <li><a href="UnitedStates.html">United States</a></li>
          <ul id="sub">
            <li><a href="California.html">California</a></li>
            <li><a href="Oregon.html">Oregon</a></li>
            <li><a href="Washington.html">Washington</a></li>
          </ul>
        <li><a href="France.html">France</a></li>
        <li><a href="UnitedKingdom.html">United Kingdom</a></li>
      </ul>
    </nav>
    <div>
      <img id="logo" src="logo.jpeg">
    </div>
  </body>
</html>

* {
  background-color: green;
}

#main ul {
  list-style: none;

}

#main ul li {
  float: right;
  position: relative;
}

#main ul li a {
  display: block;
  width: 150px;
  color: white;
  background-color: blue;
  margin: 1px;
  padding: 10px;
  text-decoration: none;
}

/*
a:visited, a:hover {
  text-decoration: none;
  color: white;
}
*/

.hoverGround {
  background-color: yellow;
}

#logo {
  width: 75px;
  height: 75px;
}

#sub a {
  display: block;
}

#sub {
  display: none;
  background: orange;
  position: absolute;
}

#main li:hover #sub{
  display: block;
}

2 Answers

Nurul Ahsan
Nurul Ahsan
2,039 Points

nick88p, If you like to drop down menu IE." sub" then in html you should continue in this way: http://codepen.io/nurulahsan/pen/ZGayvP if you want to create sub menu then you do not close the previous li element. you have to close li element after finish the sub elements.

nick88p
nick88p
5,716 Points
nick88p
nick88p
5,716 Points

Thanks for your help. It's working now.