Gyancode

A free library of HTML, CSS, JS

Search This Blog

Tuesday 13 December 2016

CSS Vertical Menu Add Submenu

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS vertical menu add submenu</title>
<style type="text/css">
.navigation { width: 300px; }
.mainmenu, .submenu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mainmenu a {
    display: block;
    background-color: #CCC;
    text-decoration: none;
    padding: 10px;
    color: #000;
}
.mainmenu a:hover { background-color: #C5C5C5; }
.mainmenu li:hover .submenu {
    display: block;
    max-height: 500px;
}
.submenu a { background-color: #999; }
.submenu a:hover { background-color: #666; }
.submenu {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}
.mainmenu li:hover .submenu .submenu2 {
    display: block;
    max-height: 500px;
}
.submenu2 a { background-color: #999; }
.submenu2 a:hover { background-color: #666; }
.submenu2 {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 0.5s ease-out;
}

</style>
</head>
<body>
<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Products</a>
      <ul class="submenu">
        <li><a href="">Tops</a></li>
        <li><a href="">Bottoms</a></li>
        <li><a href="">Footwear</a>
          <ul class="submenu2">
            <li><a href="">Tops</a></li>
            <li><a href="">Bottoms</a></li>
            <li><a href="">Footwear</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact us</a></li>
  </ul>
</nav>
</body>
</html>

No comments :

Post a Comment