CSS voorbeeld drop down menu

Aangepast op: 04 August 2018

Voorbeeld horizontale menu

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

section ul ul {
  display: none;
}

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

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

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

section ul li {
  float: left;
}

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

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

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

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

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

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