dropdown-menu-simple-pure-css.markdown

dropdown menu simple pure css

basic of dropdown menu

A Pen by Adi Cahyaludin on CodePen.

License.

index.html

<nav id="navid">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Tutorial</a>
      <ul>
        <li>
          <a href="#">HTML</a>
          <ul>
            <li>
              <a href="#">Dropdown menu</a>
              <ul>
                <li>
                  <a href="#">Simple</a>
                  <ul>
                    <li><a href="#">Pure css</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>    
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

style.css

#navid {
  margin-top:15px;
}
#navid ul {
  list-style:none;
  position:relative;
  float:left;
  margin:0;
  padding:0;
}
#navid ul li {
  position:relative;
  float:left;
  margin:0;
  padding:0;
}
#navid ul li:hover {
  background:#ddd;
}
#navid ul a {
  display:block;
  padding:0 5px;
}
#navid ul ul {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  padding:0;
}
#navid ul li:hover > ul {
  display:block;
}
#navid ul ul li {
  width:150px;
}
#navid ul ul ul {
  top:0;
  left:100%;
}