Конечно можно, пример для нормальных браузеров я сделал, а с IE разберетесь сами. Если не получится - пишите.
Вот, собственно, код:
| Код |
<div id="header">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a><span> </span>
<ul>
<li><a href="#">Item 3.1</a></li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>
|
| Код |
#header ul{
margin: 0;
padding: 0;
list-style: none;
}
#header ul li{
float: left;
display: inline;
position: relative;
}
#header ul li a{
display: block;
background: #000;
color: #fff;
font: bold 12px/24px Arial, Verdana, Tahoma, Sans-serif;
text-decoration: none;
padding: 3px 10px;
margin: 0 1px;
}
#header ul li a:hover{
text-decoration: underline;
}
#header ul li span{
display: none;
top: 35px;
left: 20px;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 20px solid #000;
}
#header ul ul{
display: none;
position: absolute;
padding-top: 30px;
}
#header ul ul a{
width: 50px;
margin: 1px 0;
}
#header ul li:hover ul,
#header ul li:hover span,
#header ul li:hover span ul{
display: block;
}
|
|
