<ul id="menu">  
  <li><a href="#">Главная</a></li>  
  <li>  
  <a href="#">Категории</a>  
  <ul>  
  <li><a href="#">CSS</a></li>  
  <li><a href="#">Графический дизайн</a></li>  
  <li><a href="#">Инструменты разработчика</a></li>  
  <li><a href="#">Веб дизайн</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Работы</a></li>  
  <li><a href="#">О нас</a></li>  
  <li><a href="#">Контакты</a></li>  
</ul>

/* Главное меню */  
#menu  
{  
  width: 100%;  
  margin: 0;  
  padding: 10px 0 0 0;  
  list-style: none;  
  background: #111;  
  background: -moz-linear-gradient(#444, #111);  
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
  background: -webkit-linear-gradient(#444, #111);  
  background: -o-linear-gradient(#444, #111);  
  background: -ms-linear-gradient(#444, #111);  
  background: linear-gradient(#444, #111);  
  -moz-border-radius: 50px;  
  border-radius: 50px;  
  -moz-box-shadow: 0 2px 1px #9c9c9c;  
  -webkit-box-shadow: 0 2px 1px #9c9c9c;  
  box-shadow: 0 2px 1px #9c9c9c;  
}  

#menu li  
{  
  float: left;  
  padding: 0 0 10px 0;  
  position: relative;  
}  

#menu a  
{  
  float: left;  
  height: 25px;  
  padding: 0 25px;  
  color: #999;  
  text-transform: uppercase;  
  font: bold 12px/25px Arial, Helvetica;  
  text-decoration: none;  
  text-shadow: 0 1px 0 #000;  
}  

#menu li:hover > a  
{  
  color: #fafafa;  
}  

*html #menu li a:hover /* IE6 */  
{  
  color: #fafafa;  
}  

#menu li:hover > ul  
{  
  display: block;  
}  

/* Подменю */  

#menu ul  
{  
  list-style: none;  
  margin: 0;  
  padding: 0;  
  display: none;  
  position: absolute;  
  top: 35px;  
  left: 0;  
  z-index: 99999;  
  background: #444;  
  background: -moz-linear-gradient(#444, #111);  
  background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  
  background: -webkit-linear-gradient(#444, #111);  
  background: -o-linear-gradient(#444, #111);  
  background: -ms-linear-gradient(#444, #111);  
  background: linear-gradient(#444, #111);  
  -moz-border-radius: 5px;  
  border-radius: 5px;  
}  

#menu ul li  
{  
  float: none;  
  margin: 0;  
  padding: 0;  
  display: block;  
  -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
  -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
  box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;  
}  

#menu ul li:last-child  
{  
  -moz-box-shadow: none;  
  -webkit-box-shadow: none;  
  box-shadow: none;  
}  

#menu ul a  
{  
  padding: 10px;  
  height: auto;  
  line-height: 1;  
  display: block;  
  white-space: nowrap;  
  float: none;  
  text-transform: none;  
}  

*html #menu ul a /* IE6 */  
{  
  height: 10px;  
  width: 150px;  
}  

*:first-child+html #menu ul a /* IE7 */  
{  
  height: 10px;  
  width: 150px;  
}  

#menu ul a:hover  
{  
  background: #0186ba;  
  background: -moz-linear-gradient(#04acec, #0186ba);  
  background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));  
  background: -webkit-linear-gradient(#04acec, #0186ba);  
  background: -o-linear-gradient(#04acec, #0186ba);  
  background: -ms-linear-gradient(#04acec, #0186ba);  
  background: linear-gradient(#04acec, #0186ba);  
}  

#menu ul li:first-child a  
{  
  -moz-border-radius: 5px 5px 0 0;  
  border-radius: 5px 5px 0 0;  
}  

#menu ul li:first-child a:after  
{  
  content: '';  
  position: absolute;  
  left: 30px;  
  top: -8px;  
  width: 0;  
  height: 0;  
  border-left: 5px solid transparent;  
  border-right: 5px solid transparent;  
  border-bottom: 8px solid #444;  
}  

#menu ul li:first-child a:hover:after  
{  
  border-bottom-color: #04acec;  
}  

#menu ul li:last-child a  
{  
  -moz-border-radius: 0 0 5px 5px;  
  border-radius: 0 0 5px 5px;  
}  

#menu:after  
{  
  visibility: hidden;  
  display: block;  
  font-size: 0;  
  content: " ";  
  clear: both;  
  height: 0;  
}  

* html #menu { zoom: 1; } /* IE6 */  
*:first-child+html #menu { zoom: 1; } /* IE7 */