Раздвижное горизонтальное меню /

<ul id="topnav"> 
<li><a href="#">Link</a></li> 
<li> 
<a href="#">Link</a> 
<span> 
<a href="#"> Link</a> | 
<a href="#">Link</a> | 
<a href="#"> Link</a> 
</span> 
</li> 
<li><a href="#">Link</a></li> 
</ul>

ul#topnav { 
margin: 0; padding: 0; 
float: left; 
width: 970px; 
list-style: none; 
position: relative; /*--Установить относительное позиционирование на неупорядоченный список себя - не на элемент списка--*/ 
font-size: 1.2em; 
background: url(topnav_stretch.gif) repeat-x; 
} 

ul#topnav li { 
float: left; 
margin: 0; padding: 0; 
border-right: 1px solid #555; /*--Сепаратор для каждой ссылки родительского уровня--*/ 
} 

ul#topnav li a { 
padding: 10px 15px; 
display: block; 
color: #f0f0f0; 
text-decoration: none; 
} 
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; } 
/*--Обратите внимание на цвет наведении на элемент списка себя, а не на ссылку. Это объясняется тем, она может оставаться подчеркнул даже при наведении курсора на subnav--*/ 
ul#topnav li span { 
           float: left; 
           padding: 15px 0; 
           position: absolute; 

           left: 0; top:35px; 
           display: none; /*--Скрыть по умолчанию--*/ 
           width: 970px; 
           background: #1376c9; 
           color: #fff; 
           /*--Внизу справа закругленный угол--*/ 
           -moz-border-radius-bottomright: 5px; 
           -khtml-border-radius-bottomright: 5px; 
           -webkit-border-bottom-right-radius: 5px; 
           /*--Внизу слева закругленный угол--*/ 
           -moz-border-radius-bottomleft: 5px; 
           -khtml-border-radius-bottomleft: 5px; 
           -webkit-border-bottom-left-radius: 5px; 
           } 
           ul#topnav li:hover span { display: block; } /*--Показать subnav при наведении--*/ 
           ul#topnav li span a { display: inline; } /*--Так как мы заявили, стиль ссылок на список ссылок родителей, мы исправим его обратно в исходное состояние--*/ 
           ul#topnav li span a:hover {text-decoration: underline;}