Специально для тебя накидал пример
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
.menu li{
position: relative;
display: inline-block;
background: #777;
list-style: none;
padding: 2px 4px;
margin: 2px;
}
.menu a{
color: #fff;
font-family: Arial;
text-decoration: none;
}
.menu li ul{
visibility: hidden;
opacity: 0;
position: absolute;
top: 100%;
left: 0;
border: 1px solid #777;
margin: 0;
padding: 0;
/*transition: visibility 0.5s, opacity 0.5s;*/
}
.menu li:hover ul{
visibility: visible;
opacity: 1;
}
.menu li li{
display: block;
white-space: nowrap;
}
</style>
<ul class="menu">
<li>
<a href="#">Пункт 1</a>
<ul>
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
</ul>
</li>
<li>
<a href="#">Пункт 2</a>
<ul>
<li><a href="#">Подпункт 1</a></li>
<li><a href="#">Подпункт 2</a></li>
</ul>
</li>
</ul>
Хм, чета транзишн во фрейме не хочет работать в хроме. Закоментил.