DIVCSS菜單：黑白灰帶有陰影效果的CSS橫向菜單_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　今天我們具體了解一下它是如何工作的。看下面的最終效果圖片：（可點擊放大）

　　首先我們看XHTML代碼：

示例代碼 [m.ghpqjb.com]

<ul id="menu">
<li><a href="http://m.ghpqjb.com/">MB5U.com首頁MB5U.com首頁</a></li>
<li><a href="http://m.ghpqjb.com/">Div CSS教程Div CSS教程</a></li>
<li><a href="http://m.ghpqjb.com/">CSS布局實例CSS布局實例</a></li>
<li><a href="http://m.ghpqjb.com/">CSS2.0教程CSS2.0教程</a></li>
</ul>

　　我們定義了一個id為menu的無序列表作為菜單的容器，里面的列表項li就是我們的菜單欄了。我們在列表項li中的鏈接a標簽內，放置了一個內聯對象span，它就是陰影效果載體，我們通過CSS定義，實現陰影效果。

　　我們看下面的CSS代碼：

示例代碼 [m.ghpqjb.com]

　　我們定義menu這個無序列表的填充與邊距均為零。高度為2em。清除默認列表項預設標記。定義菜單中的列表項為向左浮動，寬度與高度分別是2em。行高為2em，實現了文字的垂直居中。設置相對定位，并設置文字水平居中對齊。

　　請注重：我們給ul設置了左邊框為1px的實線，顏色是灰色。border-left:1px solid #bbb; 我們給li設置了右邊框為1px的實績，顏色是灰色。border-right:1px solid #bbb; 這樣就實現了左右都存在分割的線條了，請看下面的圖示（可點擊放大）。

　　我們繼續CSS代碼的編寫：

示例代碼 [m.ghpqjb.com]

#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}

　　我們定義鏈接的link與visited狀態的樣式，設置塊元素，沒有裝飾線，顏色為#000；并且在link與visited狀態下鏈接元素內的span元素為不可見：display:none。

示例代碼 [m.ghpqjb.com]

#menu li a:hover {
border:0;
color:#bbb;
}
#menu li a:hover span {
display:block;
width:8em;
height:2em;
text-align:center;
position:absolute;
left:-1px;
top:-2px;
color:#000;
cursor:pointer;
}

　　在hover鼠標懸停時，鏈接的文字顏色為#bbb。即陰影文字的顏色。而此時span內聯元素中的文字的設置發生了巨大的變化，我們來看代碼。設置成塊元素，寬度與高度分別是8em、2em。文字水平居中對齊，采用絕對定位，距左與距頂分別是-1px、-2px。文字顏色為黑色，鼠標指點為：pointer。

　　實現的原理與思路小結：在正常狀態下，鏈接內的文字是黑色的，而鏈接span元素內的文字是不可見的。當鼠標懸停時。將鏈接文字設置為淡灰色的陰影，鏈接span元素內的文字設置成黑色，并且其位置向左及向上略移一點點。這樣就實現了這款菜單的效果。

　　我們看完整的CSS代碼：

示例代碼 [m.ghpqjb.com]

#menu {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #bbb;
}
#menu li {
float:left;
width:8em;
height:2em;
line-height:2em;
border-right:1px solid #bbb;
position:relative;
text-align:center;
}
#menu li a, #menu li a:visited {
display:block;
text-decoration:none;
color:#000;
}
#menu li a span, #menu li a:visited span {
display:none;
}
#menu li a:hover {
border:0;
color:#bbb;
}
#menu li a:hover span {
display:block;
width:8em;
height:2em;
text-align:center;
position:absolute;
left:-1px;
top:-2px;
color:#000;
cursor:pointer;
}