搜索到
1
篇与
的结果
-
纯CSS写的下拉菜单代码 Dropmenu 分享一个纯CSS写的下拉菜单代码，结构非常简单，代码十分清晰，HTML+CSS下拉菜单代码。HTML代码部分：<ul id="menu"> <li><a href="">Home</a></li> <li><a href="">About Us</a> <ul> <li><a href="">The Team</a></li> <li><a href="">History</a></li> <li><a href="">Vision</a></li> </ul> </li> <li><a href="">Products</a> <ul> <li><a href="">Cozy Couch</a></li> <li><a href="">Great Table</a></li> <li><a href="">Small Chair</a></li> <li><a href="">Shiny Shelf</a></li> <li><a href="">Invisible Nothing</a></li> </ul> </li> <li><a href="">Contact</a> <ul> <li><a href="">Online</a></li> <li><a href="">Right Here</a></li> <li><a href="">Somewhere Else</a></li> </ul> </li> </ul>CSS代码部分：ul { font-family: Arial, Verdana; font-size: 14px; margin: 0; padding: 0; list-style: none; } ul li { display: block; position: relative; float: left; } li ul { display: none; } ul li a { display: block; text-decoration: none; color: #ffffff; border-top: 1px solid #ffffff; padding: 5px 15px 5px 15px; background: #2C5463; margin-left: 1px; white-space: nowrap; } ul li a:hover { background: #617F8A; } li:hover ul { display: block; position: absolute; } li:hover li { float: none; font-size: 11px; } li:hover a { background: #617F8A; } li:hover li a:hover { background: #95A9B1; }
