一個新的CSS菜單代碼_經驗交流
來源:互聯網
上載者:User
<html><head><style>body { font-family: verdana, helvetica, arial, sans-serif;}#mainMenu { background-color: #EEE; border: 1px solid #CCC; color: #000; width: 203px;}#menuList { margin: 0px; padding: 10px 0px 10px 15px;}li.menubar { background: url(/images/plus.gif) no-repeat 0em 0.3em; font-size: 12px; line-height: 1.5em; list-style: none outside;}.menu, .submenu { display: none; margin-left: 15px; padding: 0px;}.menu li, .submenu li { background: url(/images/square.gif) no-repeat 0em 0.3em; list-style: none outside;}a.actuator { background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none;}a.actuator:hover { text-decoration: underline;}.menu li a, .submenu li a { background-color: transparent; color: #000; font-size: 12px; padding-left: 15px; text-decoration: none;}.menu li a:hover, submenu li a:hover { /*border-bottom: 1px dashed #000;*/ text-decoration: underline;}span.key { text-decoration: underline;}</style></head><body> <ul id="menuList"> <li class="menubar"> Phones <ul id="productsMenu" class="menu"> <li> New Phones <ul id="newPhonesMenu" class="submenu"> <li>9290</li> <li>8390</li> <li>8290</li> <li>8270</li> </ul> </li> <li> Compare <ul id="compareMenu" class="submenu"> <li>All Phones</li> <li>Service Provider</li> </ul> </li> </ul> </li> </ul> </body></html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]