Pure CSS3 Multi Level Drop Down Menu

Pure CSS3 Multi Level Drop Down Menu Created by Pradip Kumar

by pradipktiwari

HTML

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<div class="wrapper">
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li class="submenu"><a href="#">Services</a>
        <ul>
          <li><a href="#">IT Solutions</a></li>
          <li class="submenu"><a href="#">Print Solutions</a>
            <ul>
              <li><a href="#">IT Solutions</a></li>
              <li><a href="#">Print Solutions</a></li>
              <li><a href="#">Screen Solutions</a></li>
              <li><a href="#">Advertizing</a></li>
            </ul>
          </li>
          <li><a href="#">Screen Solutions</a></li>
          <li><a href="#">Advertizing</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
<br style="clear:left;">
<br>
<p><strong>Browser  Compatibility :</strong><br>
  IE7+ <span>( No transition effect)</span><br>
  Firefox<br>
  Chrome<br>
  Safari<br>
  Opera </p> 
</div>

CSS

body {
    font:normal 1em Arial, Helvetica, sans-serif;
}
p span {
    color:#999;
    font-size:70%;
}
.wrapper {
    width:960px;
    max-width:98%;
    margin:30px auto;
}
/* Pure CSS DropDown Multilabil DropDown Menu */
 nav {
    display:block;
    width:100%;
}
nav ul {
    padding:0;
    margin:0;
    list-style:none;
}
nav ul li {
    position:relative;
}
nav ul a {
    text-decoration:none;
    color:#fff;
}
nav > ul > li {
    float:left;
    margin-right:1px;
    background:#906;
    -webkit-transition:background 500ms;
    -moz-transition:background 500ms;
    -o-transition:background 500ms;
    transition:background 500ms;
}
nav > ul > li > a {
    display:inline-block;
    padding:4px 10px 0;
    height:25px;
}
nav > ul > li.submenu > a {
    padding-right:5px;
}
nav > ul > li:hover {
    background:#000;
}
nav li.submenu {
    padding-right:22px;
}
nav li.submenu:before {
    content:"☞";
    display:block;
    position:absolute;
    top:4px;
    right:0;
    color:#fff;
    width:16px;
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    transform: rotate(40deg);
    -webkit-transition:transform 200ms;
    -moz-transition:transform 200ms;
    -o-transition:transform 200ms;
    transition:transform 200ms;
}
nav li.submenu:hover:before {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
nav li.submenu li.submenu:hover:before {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
nav ul ul {
    position:absolute;
    left:0;
    top:29px;
    width:180px;
    filter:alpha(opacity="0");
    opacity:0;
    background:#666;
    font-size:12px;
    border:1px solid #000;
    border-bottom:0;
    border-top:0;
    -webkit-transition:.5s opacity;
    -moz-transition:.5s opacity;
    -o-transition:.5s...