CSS voorbeeld drop down menu

Voorbeeld horizontale menu

• Home
• Tutorials
  • Photoshop
  • Illustrator
  • Web Design
    • HTML
    • CSS
• Articles
  • Web Design
  • User Experience
• Inspiration

HTML code

<nav>
  <ul>
    <li><a href="../">Home</a></li>
    <li><a href="#">Tutorials</a>
      <ul>
        <li><a href="#">Photoshop</a></li>
        <li><a href="#">Illustrator</a></li>
        <li><a href="#">Web Design</a>
          <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
          </ul></li>
        </ul></li>
      <li><a href="#">Articles</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">User Experience</a></li>
        </ul></li>
      <li><a href="#">Inspiration</a></li>
    </ul>
  </nav>

CSS code

nav ul ul {
  display: none;
}

nav ul li:hover > ul {
  display: block;
}

nav ul {
  background: #efefef;
  list-style: none;
  position: relative;
}

nav ul:after {
  content: "";
  clear: both;
  display: block;
}

nav ul li {
  float: left;
}

nav ul li:hover {
  background: #4b545f;
}

nav ul li:hover a {
  color: #fff;
}
		
nav ul li a {
  display: block;
  padding: 5px;
  text-decoration: none;
}

nav ul ul {
  background: #5f6975;
  padding: 0;
  position: absolute;
  top: 100%;
}

nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}

nav ul ul li a {
  color: #fff;
}

nav ul ul li a:hover {
background: #4b545f;
}
		
nav ul ul ul {
  position: absolute;
  left: 100%;
  top:0;
}