當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

自制纯css下拉导航

發布時間：2025/3/21 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了自制纯css下拉导航小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

自己動手用純css寫了一個下拉導航，下面把代碼呈上。
主要用到了偽類，相對定位，絕對定位的知識。

<doctype html> <html> <head> <meta charset="utf-8"> <style> body{margin:0px;} #menu{ width:100%; height:31px; background-color:#c9c9a7; position:relative;} #menu ul { padding:0; margin:0; list-style-type: none; }#menu ul li { float:left; position:relative; } #menu ul li a ,#menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border-top: 1px solid #c9c9a7; border-right:1px solid #fff; border-width:1px 1px 0 0;/*上右下左*/ background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ #menu ul li ul { display: none; }#menu ul li:hover a { color:#fff; background:#b3ab79; } #menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; }#menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; width:204px;/*控制下拉框的寬度*/ } /* style the background and forground colors of the links on hover */ #menu ul li:hover ul li a:hover { background:#dfc184; color:#000; }</style> </head> <body><div id="menu"><ul><li><a href="">菜單一</a><ul><li><a href="">子菜單1</a></li><li><a href="">子菜單3</a></li></ul></li><li><a href="">菜單二</a><ul><li><a href="">子菜單4</a></li><li><a href="">子菜單5</a></li><li><a href="">子菜單6</a></li></ul></li><li><a href="">菜單三</a><ul><li><a href="">子菜單4</a></li><li><a href="">子菜單5</a></li><li><a href="">子菜單6</a></li></ul></li></ul></div> </body> </html>

轉載于:https://www.cnblogs.com/xiaogou/p/5055075.html

總結

以上是生活随笔為你收集整理的自制纯css下拉导航的全部內容，希望文章能夠幫你解決所遇到的問題。

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