構思：這個設計完全是用純css製作的，沒有js和jQuery的添加。
html中主要有一個<div>,三個<ul>.主要顯示作用是在css中。<div>作爲一個盒子，大容器。三個<ul>作爲佔用盒子的三個小容器，通過設置<ul>和<li>的元素同在 一行上，設置<li>中的第一個z-index爲1，覆蓋在最上面，然後通過設置三個小容器增添背景顏色，所以以下的<li>會看不見。
用到的主要知識有：position、transition、:hover、z-index
這是沒有加覆蓋的背景顏色的圖1
這是加了背景的圖2
當你鼠標觸摸到菜單欄時就有下拉的效果
下面是index.html<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜單欄</title>
<link rel="stylesheet" type="text/css" href="menu1.css"/>
</head>
<body>
<!--css構思：這個菜單欄是運用了css來構造，而沒有用到js。構造想法，整體爲一個div層，
爲一個大容器。將div大容器分爲三個小的容器。將ul中的全部裝在分別的三個小容器中，
用遮蓋的方法，
-->
<div id="nav">
<ul class="menu menu01">
<li class="main"><a href="#">Adobe</a></li>
<li class="sub01"><a href="#">Illustrator</a></li>
<li class="sub02"><a href="#">Photoshop</a></li>
<li class="sub03"><a href="#">Flash</a></li>
<li class="sub04"><a href="#">Dreameweaver</a></li>
<li class="sub05"><a href="#">Fireworks</a></li>
</ul>
<ul class="menu menu02">
<li class="main"><a href="#">Microsoft</a></li>
<li class="sub01"><a href="#">Windows XP</a></li>
<li class="sub02"><a href="#">Windows Vista</a></li>
<li class="sub03"><a href="#">Windows 7</a></li>
</ul>
<ul class="menu menu03">
<li class="main"><a href="#">Apple</a></li>
<li class="sub01"><a href="http://twitter.com/calmbooks" target="_parent">Orange</a></li>
<li class="sub02"><a href="#">Banana</a></li>
<li class="sub03"><a href="#">Grape</a></li>
<li class="sub04"><a href="#">Peach</a></li>
</ul>
</div>
</body>
</html>下面是css代碼menu.css
/*設置全部元素的外邊距，內邊距爲0*/
*{
margin:0;
padding:0;
}
/*body{*/
/*background: #fff;*/
/*}*/
li{
list-style: none;
}
/*設置整一個div,相當於一個盒子，大容器,距離頂部爲30px*/
#nav{
width: 390px;
height: 33px;
margin:30px auto;
}
/*三個小的容器*/
.menu{
float: left;
/*相對位置，這是關鍵放置ul中的內容，float爲left，
相對於父元素，那麼他的下一個元素就根據父元素來放置*/
position: relative;
width:130px;
height:1px;
/*transition過度效果，*/
transition: 0.4s ease-in-out;
}
/*:hover,在鼠標移動到該元素上添加樣式*/
/*設置小容器，當鼠標移動到小容器上.menu01、2、3時變長*/
.menu01:hover {
/*180/5=36,每個格子爲36px*/
height: 180px;
}
.menu02:hover {
height: 120px;
}
.menu03:hover {
height: 150px;
}
/*.menu li中的全部元素絕對定位*/
.menu li{
position: absolute;
/*距離大容器左邊爲0px*/
left:0;
width:130px;
}
.menu li a{
display:block;
text-decoration: none;
}
.menu .main{
top:0%;
z-index:1;
width:130px;
border:none;
text-align: center;
}
.menu .main a{
font-size:12px;
font-weight:bold;
height:25px;
/*定義字體顏色*/
/*color: #ff0000;*/
padding:6px 0 0;
/*上邊框樣式*/
/*border-top: solid 1px #d21;*/
/*border-bottom: solid 1px #d21;*/
/*文本陰影，水平，垂直，模糊，顏色*/
/*text-shadow: 0 -1px 1px #d21;*/
/*background這是關鍵的一部分，通過背景顏色覆蓋菜單欄，而首項.menu .main已經設置爲z-index爲1了*/
/*所以能夠顯示在背景顏色前*/
background: #ff7744;
/*background: -webkit-gradient(linear, left top, left bottom, from(#f96),*/
/*color-stop(90%, #f42), to(#f21));*/
/*background: -moz-linear-gradient(#f96, #f42 90%, #f21);*/
}
/*top屬性規定元素的頂部邊緣，定義一個定位元素外邊距邊界與其包含塊上邊界之間的偏移*/
/*如果position屬性爲static，top不會產生任何效果*/
/*% 設置以包含元素的百分比計的上邊位置*/
.menu01 .sub01 {
top: 17%;
}
.menu01 .sub02 {
top: 34%;
}
.menu01 .sub03 {
top: 50%;
}
.menu01 .sub04 {
top: 67%;
}
.menu01 .sub05 {
top: 84%;
}
.menu02 .sub01 {
top: 25%;
}
.menu02 .sub02 {
top: 50%;
}
.menu02 .sub03 {
top: 75%;
}
.menu03 .sub01 {
top: 20%;
}
.menu03 .sub02 {
top: 40%;
}
.menu03 .sub03 {
top: 60%;
}
.menu03 .sub04 {
top: 80%;
}
