PonTov.uCoz.Net


:

 -  ,   :

<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>  
 

 -   CSS  :

.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; 
 }