下圖為具有二級菜單的導航效果，鼠標懸浮在“服裝”菜單時出現如圖所示的二級菜單效果。

鼠標懸浮于二級菜單效果如下圖所示：

注：鼠標懸浮于菜單時，二級菜單背景顏色為漸變，漸變顏色值為#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="#">數碼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;}/*為了看清導航效果，設置上和左側30像素外邊距*/nav{margin-top:30px;margin-left:30px;}/*去掉一級菜單和二級菜單的列表項目符號 ；一級菜單水平排列*/nav ul li {list-style-type: none;float: left;}/*設置二級菜單垂直排列效果*/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;}/*設置二級菜單背景顏色及隱藏*/nav ul li ul {background-color: #900;background-image:linear-gradient(45deg,#900,#FF2F2F);position: absolute;left: -999em;padding-top: 10px;padding-bottom: 10px;}/*鼠標懸浮在一級菜單時，二級菜單顯示，為了防止被別的元素覆蓋設置較大的z-index值*/nav ul li:hover ul{left:auto;z-index:9999;}/*二級菜單鏈接文本顏色*/nav ul li ul li a {color: #FFF;}/*鼠標懸浮一級菜單效果*/nav ul li a:hover {background-color: #900;color: #FFF;}/*鼠標懸浮二級菜單效果*/nav ul li ul li a:hover {background-color: #FF2F2F;}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。