這種方法是基於 A List Part 介紹的 Suckerfish Dropdowns 技術實現的。這個菜單也是基於簡單的無序列表實現的。頂級的菜單項是一個主列表，每個主菜單對應的下拉菜單項將放在內嵌列表中：
首先爲頂級菜單添加樣式規則：去除它的默認的樣式，同時將列表項的 float 屬性設置成 left ，以使它們以水平方式排列，然後列表項的 position 屬性設置成 relative，以便
後續能夠定位到其包含的彈出菜單：
強制使菜單中的鏈接以塊形元素的形式顯示，從而讓它們能夠填充菜單項所處的方形區域，在IE6(以及更早期的版本)中無法實現效果，但通過把鏈接的寬度設置成100%，也能確保可點擊的區域擴展到整個容器範圍。
接下來，將爲生成彈出菜單的內嵌列表添加樣式規則：使它們在默認情況下不會顯示 (display: none)，而且在顯示時使用絕對定位模式，以確保它們不會影響文檔其他內容的頁面佈局。
爲了避免彈出菜單也以水平方式排列，所以需要將 float 屬性的值設置爲 none;
#nav ul li {
float: none;
}
最終，通過使用 :hover僞類使鼠標指針移動到菜單項時顯示出彈出菜單：
以上的代碼最初將把內嵌列表的 display 屬性設置爲 none ，當用戶將鼠標指針移到主菜單項上時，內嵌列表的 display 屬性就將被設置爲 block ，菜單也就將顯示出來。
但這種效果在IE6中是無法實現的，因爲在IE6瀏覽器中，:hover 僞類僅適用於鏈接，其他元素都不可用。
其他的CSS代碼簡單地應用一些可視化樣式規則，對菜單的外觀提供了一些美化的效果。
注意：
當彈出菜單顯示出來時，用戶必須向下移動鼠標指針以選中彈出菜單中的某個菜單項，但執行這個操作時，鼠標指針將會從主菜單項上移開，因爲 :hover 僞類將不再生效。
看看頁面的樣式規則，我們就能發現在此使用了絕對定位模式來顯示內嵌列表，從而防止對頁面中的其他內容產生影響。
理論上我們應該在頂級菜單和彈出菜單之間留出一些空間，這些空間可以通過爲頂級菜單添加邊距(margin)的方法來實現。但在IE7中，當鼠標指針放在這個邊距範圍中時，彈出菜單也將消失。因此我們必須通過爲頂級菜單應用白色邊框(border)來實現這種空間。
我在每個列表項的頂部添加了一個非常小的邊距，其值和底部的負邊距相等。這將使菜單向下移動一個像素，恰好確保白色邊框不會覆蓋頂級菜單的底部。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>drop-down</title>
<link rel="stylesheet" type="text/css" href="menus.css" />
<script type="text/javascript">
function addClass(li){
li.className = 'hover';
}
function removeClass(li){
li.className = '';
}
</script>
</head>
<body>
<ul id="nav">
<li οnmοuseοver="addClass(this)" οnmοuseοut="removeClass(this)"><a href="#">Starters</a>
<ul>
<li><a href="">Fish</a></li>
<li><a href="">Fruit</a></li>
<li><a href="">Soups</a></li>
</ul>
</li>
<li οnmοuseοver="addClass(this)" οnmοuseοut="removeClass(this)"><a href="#">Main courses</a>
<ul>
<li><a href="">Meat</a></li>
<li><a href="">Fish</a></li>
<li><a href="">Vegetarian</a></li>
</ul>
</li>
<li οnmοuseοver="addClass(this)" οnmοuseοut="removeClass(this)"><a href="#">Desserts</a>
<ul>
<li><a href="">Fruit</a></li>
<li><a href="">Puddings</a></li>
<li><a href="">Ice Creams</a></li>
</ul>
</li>
</ul>
</body>
</html>@CHARSET "UTF-8";
body {
font: 1em Verdana, Arial, sans-serif;
background-color: #FFFFFF;
color: #000000;
margin: 1em 0 0 1em;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
position: relative;
width: 10em;
border: 1px solid #B0C4DE;
background-color: #E7EDF5;
color: #2D486C;
font-size: 80%;
margin-right: 1em;
}
#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
padding-left: 1em;
color: #2D486C;
}
* html #nav a {
width: 100%;
}
#nav ul {
display: none;
position: absolute;
padding: 0;
}
#nav ul li {
border: 0 none transparent;
border-bottom: 1px solid #E7EDF5;
border-top: .5em solid #FFF;
background-color: #F1F5F9;
font-size: 100%;
margin-bottom: -1px;
margin-top: 1px;
padding: 0;
}
#nav li.hover ul, #nav li:hover ul {
display: block;
}