Многоуровневое Меню CSS3

by Andrey Dobrovoi

HTML

<div id="container">
<div id='menu'>
<ul>
   <li class='active'><a href='index.html'><span>Главная</span></a></li>
    <li><a href='#'><span>О Сайте</span></a></li>
   <li class='has-sub'><a href='#'><span>Уроки</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Photoshop</span></a>
            
         </li>
         <li class='has-sub'><a href='#'><span>Разработка</span></a>
             <ul>
               <li><a href='#'><span>HTML</span></a></li>
               <li class='last'><a href='#'><span>CSS</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
  
   <li class='last'><a href='#'><span>Контакты</span></a></li>
</ul>
</div>
</div>

CSS

body { background-color: #E0E0E0; }      
#container {
  margin: 0 auto;
  max-width: 700px;
  margin-top: 100px;
}
/* MENU FUNCTIONS */
#menu{width: 100%;}
#menu:before,
#menu:after,
#menu > ul:before,
#menu > ul:after {
  content: '';
  display: table;
}
#menu:after,
#menu > ul:after {
  clear: both;
}
/* SUB MENU FUNCTIONS */
#menu > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
#menu > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  position: absolute;
  border-radius: 0 0 3px 3px;
  -webkit-box-shadow: none;
  -o-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  box-shadow: none;
}
#menu > ul > li > ul {
  width: 200px;
  position: absolute;
}
#menu > ul > li > ul > li {
  float: none;
  position: relative;
}
#menu > ul > li > ul > li > ul {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
#menu > ul > li > ul > li:hover > ul {
  opacity: 1;
  visibility: visible;
  position: absolute;
}
#menu > ul > li > ul > li > ul {
  left: 200px;
  top: 1px;
  width: 200px;
}
#menu > ul > li > ul > li > ul > li {
  float: none;
}
/* BASIC TEXT & TRANSITION STYLING */
#menu {
  width: auto;
}
#menu,
#menu ul,
#menu ul li,
#menu ul li a {
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family: 'Arial', sans-serif;
  font-weight: bold;
  font-size: 18px;
 color: #ffffff;
  -webkit-transition: all ease .2s;
  -o-transition: all ease .2s;
  -moz-transition: all ease .2s;
  -ms-transition: all ease .2s;
  transition: all ease .2s;
}

/* MENU STYLINGS */

#menu a {
  text-shadow: 2px 2px 0px #20855b;
}
#menu ul {
  background: #11b274; /* Old browsers */
background: -moz-linear-gradient(top, #11b274 0%, #6cc993 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#11b274), color-stop(100%,#6cc993)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #11b274 0%,#6cc993 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #11b274...