纯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 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滑动菜单 ,滑动门

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注