<div class="menu_container">  
  <nav class="menu">  
  <ul>  
  <li><a href="#" class="selected">Главная</a>  
  <ul class="visible">  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Форум</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Новости</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Блог</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">О нас</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Портфолио</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  <li><a href="#">Контакты</a>  
  <ul>  
  <li><a href="#">Пункт 1</a></li>  
  <li><a href="#">Пункт 2</a></li>  
  <li><a href="#">Пункт 3</a></li>  
  <li><a href="#">Пункт 4</a></li>  
  <li><a href="#">Пункт 5</a></li>  
  <li><a href="#">Пункт 6</a></li>  
  </ul>  
  </li>  
  </ul>  
  <form class="search">  
  <input type="text" class="search_field" name="search" placeholder="Поиск...">  
  <input type="submit" class="button" value="" >  
  </form>  
  </nav>  
  </div>  

.menu_container{ 
  width:980px; 
  height:77px; 
  margin:40px auto 0 auto; 
  background:#09f; 
  overflow:hidden; 
  -webkit-box-shadow:0 0 7px #888; 
  -moz-box-shadow:0 0 7px #888; 
  box-shadow:0 0 7px #888; 
} 

.menu{ 
  height:41px; 
  background:#333; 
} 

.menu ul{ 
  position:relative; 
  float:left; 
} 

.menu ul li{ 
  float:left; 
} 

.menu ul li a{ 
  display:block; 
  height:41px; 
  padding:0 20px; 
  font-size:15px; 
  color:#777; 
  line-height:45px; 
  -webkit-transition:all .2s linear; 
  -moz-transition:all .2s linear; 
  -ms-transition:all .2s linear; 
  -o-transition:all .2s linear; 
  transition:all .2s linear; 
} 

.menu ul li:hover a, 
.menu ul li a.selected{ 
  background:#09f; 
  color:#fff; 
} 

.menu ul li a:active{ 
  color:#ccc; 
} 

.menu ul:hover li a.selected{ 
  background:#333; 
  color:#777; 
} 

.menu ul li:hover a.selected{ 
  background:#09f; 
  color:#fff; 
} 

.menu ul li a:active.selected{ 
  color:#ccc; 
} 

.menu ul ul{ 
  width:980px; 
  height:36px; 
  position:absolute; 
  left:0; 
  margin-left:8%; 
  filter:alpha(opacity=0); 
  opacity:0; 
  background:#09f; 
  -webkit-transition:all .4s ease-out .1s; 
  -moz-transition:all .4s ease-out .1s; 
  -ms-transition:all .4s ease-out .1s; 
  -o-transition:all .4s ease-out .1s; 
  transition:all .4s ease-out .1s; 
} 

.menu ul ul.visible{ 
  z-index:1; 
  margin-left:0; 
  filter:alpha(opacity=100); 
  opacity:1; 
} 
.menu ul:hover ul.visible{ 
  margin-left:8%; 
  filter:alpha(opacity=0); 
  opacity:0; 
} 
.menu ul li:hover ul.visible{ 
  margin-left:0; 
  filter:alpha(opacity=100); 
  opacity:1; 
} 
.menu ul li:hover ul{ 
  z-index:2; 
  margin-left:0; 
  filter:alpha(opacity=100); 
  opacity:1; 
} 
.menu ul ul li a{ 
  height:36px; 
  padding:0 20px; 
  font-size:13px; 
  color:#fff; 
  text-transform:capitalize; 
  line-height:40px; 
  -webkit-transition:color .3s ease-in-out; 
  -moz-transition:color .3s ease-in-out; 
  -ms-transition:color .3s ease-in-out; 
  -o-transition:color .3s ease-in-out; 
  transition:color .3s ease-in-out; 
} 
.menu ul ul li:hover a{ 
  color:#333; 
  text-shadow:1px 1px 5px #888; 
} 
.menu ul ul li a:active{ 
  color:#666; 
} 
.search{ 
  margin:3px 8px 0 0; 
  float:right; 
  border:solid 1px #555; 
} 
.search_field{ 
  width:160px; 
  height:20px; 
  padding:6px 4px; 
  float:left; 
  color:#666; 
  font-size:13px; 
  line-height:20px; 
  background:#333; 
  -webkit-transition:color .2s linear; 
  -moz-transition:color .2s linear; 
  -ms-transition:color .2s linear; 
  -o-transition:color .2s linear; 
  transition:color .2s linear 
} 

.search_field:focus{ 
  color:#999; 
} 

.button{ 
  width:28px; 
  height:28px; 
  float:left; 
  background:#333 url(../img/search_icon.png) 0 3px; 
}