Sarkana horizontālā izvēlne

by Antikrists

HTML

<ul id="menu"> 
 <li><a href="#">UW-1</a> 
 <ul> 
 <li><a href="#">1</a></li> 
 <li><a href="#">2</a></li> 
 </ul> 
 </li> 
 <li><a href="#">UW-2</a> 
 <ul> 
 <li><a href="#"> 1</a></li> 
 <li><a href="#"> 2</a></li> 
 </ul> 
 </li> 
 <li><a href="#">UW-3</a> 
 <ul> 
 <li><a href="#">1</a></li> 
 <li><a href="#">2</a></li> 
 </ul> 
 </li> 
</ul>

CSS

ul, 
 li { 
 list-style: none; 

 margin: 0; 
 
 padding: 0; 
 
 } 
 
 #menu { 
 width: 100%; 
 height: 71px; 

 background-color: rgba(255, 13, 0, 0, 4); 

 font: bold 14px/25px Arial, sans-serif; 
 
 } 
 
 #menu li { 
 float: left; 
  
 background-color: rgba(255, 13, 0, 0.6); 
 
 position: relative; 
 } 
 
 #menu ul li { 
 float: none; 

 } 
 
 #menu a { 
 display: block; 

 color: #fff; 

 text-decoration: none; 
 
 white-space: nowrap; 

 padding: 5px 10px; 

 border-bottom: 1px solid #DDDDDD; 
 
 border-right: 1px solid #DDDDDD; 
 
 } 
 
 #menu ul a { 
 min-width: 200px; 
 
 width: auto !important; 

 width: 200px; 
  
 } 
 
 #menu ul { 
 position: absolute; 

 display: none; 
 
 } 
 
 #menu li:hover ul, 
 #menu li.ie6 ul { 
 display: block; 
 
 } 
 
 #menu li:hover ul a, 
 #menu li.ie6 ul a { 
 background-color: rgba(255, 13, 0, 0.2); 
 
 } 
 
 #menu li:hover a, 
 #menu li ul a:hover, 
 #menu li.ie6 a { 
 background-color: rgba(255, 13, 0, 0.6); 
 
 }