HTML CSS Vertical menu

by Taqi_Shah

HTML

<div id='cssmenu'>
<ul>
   <li><a href='#'><span>Home</span></a></li>
   <li class='active has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

CSS

#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
}
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
  float: left;
}
#cssmenu ul li {
  float: left;
  min-height: 1px;
  line-height: 1.5em;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul {
  top: -1px;
  left: 99%;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul li {
  float: none;
}
#cssmenu a {
  display: block;
}
/* Custom CSS Styles */
#cssmenu {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu ul {
  background: #F0EFEA;
  border: 1px solid #aaaaaa;
  padding: 4px;
  width: 200px;
}
#cssmenu ul li {
  color: #000000;
  position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  background: #61b72d;
  background: -moz-linear-gradient(#61b72d 0%, #4b8e23 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #61b72d), color-stop(100%, #4b8e23));
  background: -webkit-linear-gradient(#61b72d 0%, #4b8e23 100%);
  background: linear-gradient(#61b72d 0%, #4b8e23 100%);
  color: #FFF;
}
#cssmenu ul li.hover > a,
#cssmenu ul li:hover > a {
  color: #FFF;
  border: 1px solid #4b8e23;
}
#cssmenu ul ul {
  width: 150px;
}
#cssmenu a {
  border: 1px solid transparent;
  padding: 3px 10px;
}
#cssmenu a:link,
#cssmenu a:visited {
  color: #000000;
  text-decoration: none;
}
#cssmenu a:hover {
  background: #61b72d;
  background: -moz-linear-gradient(#61b72d 0%, #4b8e23 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #61b72d), color-stop(100%, #4b8e23));
  background:...