純CSS黑色下拉導航條

2024-09-05 12:19:44

字體：大中小

來源：轉載

供稿：網友

純CSS黑色風格的下拉導航條，自己根據已有功能慢慢擴展出來的，只為告訴大家用CSS同樣可以實現本效果哦，沒有用到任何的JS代碼，效果也不錯，很多用站都可以用的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>黑色下拉導航條</title><style type="text/css">* { margin:0; padding:0;}body { font-family:Arail; font-size:15px;}.nav { margin:20px;}.nav ul ul { display:none;}.nav ul li { float:left; position:relative; width:80px; text-align:center;}.nav li a { display:block; color:white; text-decoration:none; background:#000; padding:10px; font-size:15px;}.nav li a:hover {color:#ffffff; background:#003399;}.nav ul li:hover ul { display:block; position:absolute; top:38px; left:0px;}ul { list-style-type:none;}.nav li ul li a { margin-top:0; background:red; color:#000;}.nav li ul li a:hover { color:#FFF; background:#000;}</style></head><body><div   id="iwvjtn8m0"   class="nav">  <ul>    <li>源碼下載      <ul>        <li>Orange</li>        <li>banana</li>      </ul>    </li>    <li>網站首頁      <ul>        <li>Apple</li>        <li>cattle</li>      </ul>    </li><li>ASP      <ul>        <li>ASP</li>        <li>cattle</li>      </ul>    </li><li>PHP      <ul>        <li>AJAX</li>        <li>dog</li>      </ul>    </li><li>ASP.NET      <ul>        <li>ASP</li>        <li>cattle</li>        <li>dog</li>      </ul>    </li><li>AJAX      <ul>        <li>MOOTS</li>        <li>DOTS</li>      </ul>    </li><li>JQUERY      <ul>        <li>JAVA</li>        <li>cattle</li>        <li>EXTS</li>        <li>cat</li>      </ul>    </li><li>CHINA      <ul>        <li>CHINA</li>        <li>PHP</li>      </ul>    </li><li>USA      <ul>        <li>USA</li>        <li>cattle</li>        <li>chicken</li>      </ul>    </li>  </ul></div></body></html>

上一篇：用作排行榜的CSS側邊列表滑動門

下一篇：阿里巴巴css滑動菜單 ,滑動門