WEB前端学习笔记01利用纯CSS书写二级水平导航菜单
生活随笔
收集整理的這篇文章主要介紹了
WEB前端学习笔记01利用纯CSS书写二级水平导航菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
先放效果圖：
將鼠標放置在對應一級導航處，即顯示二級導航欄
HTML部分代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>下拉導航欄</title><link rel="stylesheet" href="css/mynew.css" /></head><body><ul><li><a href="#">首頁</a></li><li><a href="#">jquery特效</a><ul><li><a href="#">jQuery文字特效</a></li><li><a href="#">JQuery圖片特效</a></li><li><a href="#">jQuery選項卡特效</a></li><li><a href="#">jQuery文字特效</a></li></ul></li><li><a href="#">Javascript特效</a></li><li><a href="#">Flash特效</a><ul><li><a href="#">Flash選項卡特效</a></li><li><a href="#">Flash圖片特效</a></li><li><a href="#">Flash文字特效</a></li><li><a href="#">Flash文字特效</a></li></ul></li><li><a href="#">div+css教程</a></li><li><a href="#">HTML5教程</a></li></ul></body></html>CSS部分代碼：
ul {margin: 0px;padding: 0px; }ul li {list-style: none;float: left;height: 30px;width: 115px;display: inline;font: 0.9em Arial, helvetica, sans-serif; }ul li a {color: #fff;width: 113px;margin: 0px;padding: 0px 0px 0px 8px;text-decoration: none;display: block;background: #808080;line-height: 29px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc; }ul li ul li {height: 25px; }ul li ul li a {background: #666;line-height: 24px; }ul li a:hover{background: #666;border-bottom: 1px dashed #ff0000; }ul li ul {display: none; /*或者 visibility:hidden;*/ }ul li:hover ul {display: block;/*或者 visibility:visible;*/}ul li ul li a :hover {background: #333; }總結
以上是生活随笔為你收集整理的WEB前端学习笔记01利用纯CSS书写二级水平导航菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 十 Java集合框架（2）：Set接口
- 下一篇： 如何关闭一切流氓程序开机自启【gitte