CSS偽類的一個非常重要的應用就是下拉菜單。
最近在學習中發現網上純粹用CSS實現的下拉菜單主要有兩種思路：一種是通過visibility屬性的切換，另一種是基於display屬性的切換。二者在大體的結構上是一致的，只是對於二級子菜單的隱藏和顯示的實現策略上有所不同。
下拉菜單的HTML代碼如下：
<!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>CSS下拉菜單</title>
<!-- <link rel="stylesheet" type="text/css" href="nav1.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="nav2.css" /> -->
</head>
<body>
<div class="menu">
<ul>
<li>
<a href="#">menu_0</a>
<ul>
<li><a href="#">item_0</a></li>
<li><a href="#">item_1</a></li>
<li><a href="#">item_2</a></li>
<li><a href="#">item_3</a></li>
<li><a href="#">item_4</a></li>
</ul>
</li>
<li>
<a href="#">menu_1</a>
<ul>
<li><a href="#">item_5</a></li>
<li><a href="#">item_6</a></li>
<li><a href="#">item_7</a></li>
<li><a href="#">item_8</a></li>
<li><a href="#">item_9</a></li>
</ul>
</li>
<li>
<a href="#">menu_2</a>
<ul>
<li><a href="#">item_10</a></li>
<li><a href="#">item_11</a></li>
<li><a href="#">item_12</a></li>
<li><a href="#">item_13</a></li>
<li><a href="#">item_14</a></li>
</ul>
</li>
<li>
<a href="#">menu_3</a>
<ul>
<li><a href="#">item_15</a></li>
<li><a href="#">item_16</a></li>
<li><a href="#">item_17</a></li>
<li><a href="#">item_18</a></li>
<li><a href="#">item_19</a></li>
</ul>
</li>
<li>
<a href="#">menu_4</a>
<ul>
<li><a href="#">item_20</a></li>
<li><a href="#">item_21</a></li>
<li><a href="#">item_22</a></li>
<li><a href="#">item_23</a></li>
<li><a href="#">item_24</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear: left;">Content!</div>
</body>
</html>
在不添加CSS的情況下，下拉菜單實際上就是二級無序列表。在CSS中通過對子列表的隱藏與顯示的操作來達到下拉的效果。
兩種實現下拉的方法的共同點在於：
1. 必須將最外層的ul元素的padding屬性設為0，以保證整個下拉菜單中的沒有無序列表中的自動縮進。同時，將list-style-type設為none，以去除列表項前的標記。
2. 如果主菜單需要橫向，則需要把li元素設置為浮動元素，即float: left。
3. 使二級子菜單呈一列的方法是將二級列表的ul元素和li元素設置為相同的寬度。
4. 必須把二級列表的ul元素的position屬性為absolute，以保證將該元素及其子元素從文件流中去除，這樣一來當二級菜單顯示的時候不會影響下面的其它元素。
5. 下拉菜單后面的頁面元素，需要把clear屬性設置為left或者both。這是因為下拉菜單被設為了浮動元素，如果不這樣做的話后面的頁面元素的位置將會不恰當。
6. 需要通過偽類:link、:visited以及:hover來設置元素有焦點和沒有焦點時的顏色狀態等。
不同點如前所述，即是：當一級菜單項沒有焦點的時候，方法一會把二級菜單的ul元素的visibility屬性設為hidden，使整個二級菜單不可見；當有焦點的時候，需要把相應的二級菜單的visibility屬性改為visible，使其可見。而方法二則將需要不可見的二級菜單ul元素的display元素設為none，當需要可見的時候改為block。
上述狀態的切換均通過偽類來完成而不調用JavaScript。
詳細代碼如下：
nav1.css（通過切換visibility屬性）
.menu {
font-family: Arial, Helvetica, sans-serif;
width: 455px;
margin: 0 auto;
}
.menu ul {
padding: 0;
list-style-type: none;
}
.menu ul li {
float: left;
width: 90px;
text-align: center;
line-height: 30px;
background: #FC0;
border: #fff 1px solid;
border-width: 0 1px 0 0;
}
.menu ul li a:link, .menu ul li a:visited {
text-decoration: none;
color: #000;
}
.menu ul li:hover {
background: #F60;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li ul {
visibility: hidden;
position: absolute;
width: 90px;
}
.menu ul li:hover ul li {
visibility: visible;
background: #F96;
color: #000;
width: 90px;
}
.menu ul li ul li a:link, .menu ul li ul li a:visited {
color: #000;
}
.menu ul li ul li:hover {
background: #39F;
}
nav2.css（通過切換display屬性）
.menu {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0 auto;
width: 505px;
}
.menu ul {
padding: 0;
list-style-type: none;
}
.menu ul li {
float: left;
}
.menu ul li a:link, .menu ul li a:visited {
background: #3CF;
color: #000;
text-decoration: none;
display: block;
width: 100px;
height: 30px;
text-align: center;
}
.menu ul li:hover a {
background: #009;
color: #fff;
font-weight: bold;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover ul {
display: block;
width: 100px;
position: absolute;
}
.menu ul li ul li a:link, .menu ul li ul li a:visited {
background: #6FF;
color: #000;
}
.menu ul li ul li:hover a {
background: #60F;
color: #F60;
font-weight: bold;
}
二者在效果上並沒有多大區別，個人感覺切換display屬性的方法比較方便，而且將其擴展到三級下拉菜單也更簡單。