下圖為具有二級菜單的導(dǎo)航效果，鼠標(biāo)懸浮在“服裝”菜單時出現(xiàn)如圖所示的二級菜單效果。

鼠標(biāo)懸浮于二級菜單效果如下圖所示：

注：鼠標(biāo)懸浮于菜單時，二級菜單背景顏色為漸變，漸變顏色值為#900,#FF2F2F。

---

參考答案：

上例中HTML代碼為：

<nav> <ul> <li><a href="#">首頁a>li> <li><a href="gaikuang.html">圖書a>li> <li><a href="index.html">家電a> <ul> <li><a href="#">手機a>li> <li><a href="#">電腦a>li> <li><a href="#">洗衣機a>li> <li><a href="#">冰箱a>li> <li><a href="#">微波爐a>li> ul> li> <li><a href="#">數(shù)碼a>li> <li><a href="#">服裝a> <ul> <li><a href="#">男裝a>li> <li><a href="#">女裝a>li> <li><a href="#">童裝a>li> ul> li> <li><a href="#">家居a>li> ul>nav>

CSS樣式代碼為：

/*邊距清零*/* {margin: 0px;padding: 0px;}/*為了看清導(dǎo)航效果，設(shè)置上和左側(cè)30像素外邊距*/nav{margin-top:30px;margin-left:30px;}/*去掉一級菜單和二級菜單的列表項目符號 ；一級菜單水平排列*/nav ul li {list-style-type: none;float: left;}/*設(shè)置二級菜單垂直排列效果*/nav ul li ul li {float: none;}/*菜單的鏈接效果*/nav ul li a {color:#900;text-decoration: none;width: 8em;display: block;text-align: center;line-height: 30px;}/*設(shè)置二級菜單背景顏色及隱藏*/nav ul li ul {background-color: #900;background-image:linear-gradient(45deg,#900,#FF2F2F);position: absolute;left: -999em;padding-top: 10px;padding-bottom: 10px;}/*鼠標(biāo)懸浮在一級菜單時，二級菜單顯示，為了防止被別的元素覆蓋設(shè)置較大的z-index值*/nav ul li:hover ul{left:auto;z-index:9999;}/*二級菜單鏈接文本顏色*/nav ul li ul li a {color: #FFF;}/*鼠標(biāo)懸浮一級菜單效果*/nav ul li a:hover {background-color: #900;color: #FFF;}/*鼠標(biāo)懸浮二級菜單效果*/nav ul li ul li a:hover {background-color: #FF2F2F;}

總結(jié)

以上是生活随笔為你收集整理的css二级菜单的隐藏与显示_具有二级菜单的导航案例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。