利用css制作二级下拉菜单
生活随笔
收集整理的這篇文章主要介紹了
利用css制作二级下拉菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一目了然、通俗易懂——利用css制作二級下拉菜單
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>利用css制作二級下拉菜單</title><style type="text/css">* {margin: 0;padding: 0;/* 清除內外邊距 */}div {margin: 0px auto;/* 盒子給寬高之后,margin: 0px auto;居中才會生效 */width: 300px;height: 300px;background-color: pink;}ul li {list-style: none;/* 去掉元素前的小圓點 */}ul a {text-decoration: none;/* 去掉字體的下劃線 */}ul li {/* 一級菜單的樣式 */float: left;width: 100px;height: 36px;line-height: 36px;/* 行高等于高使文字垂直居中 */text-align: center;background: #bcecdd;}ul li ul li {display: none;/* 隱藏二級菜單 */}ul li:hover ul li { /* 鼠標經過時顯示二級菜單 */display: block;/* 二級菜單轉化為塊級元素,使其獨占一行 */}ul li:hover {background-color: springgreen;/* 鼠標經過時顯示的背景顏色 */}</style></head><body><div><ul><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><ul><li><a href="">二級</a></li><li><a href="">二級</a></li><li><a href="">二級</a></li></ul></li><li><a href="">一級</a><ul><li><a href="">二級</a></li><li><a href="">二級</a></li><li><a href="">二級</a></li></ul></li></ul></div></body> </html>運行效果：
總結
以上是生活随笔為你收集整理的利用css制作二级下拉菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ubuntu 可视化图片——eog
- 下一篇： java 线程 设计模式_Java多线程