使用CSS制作简单的下拉菜单导航
发布时间：2018-09-10 03:14:02 所属栏目：经验 来源：站长网
导读：welcome to ximumu site.这个教程会告诉你如何创建一个简单的CSS下拉菜单.如果你觉得好就请告诉你的一个朋友让他也知道这个网站,木木会非常感谢的.^_^ 首先,我们来给这个下拉菜单写一个HTML的代码.先创建一个div来做为容器,然后把这个导航菜单放到这个内器
|
副标题[/!--empirenews.page--]
welcome to ximumu site.这个教程会告诉你如何创建一个简单的CSS下拉菜单.如果你觉得好就请告诉你的一个朋友让他也知道这个网站,木木会非常感谢的.^_^ HTML代码： Copy to Clipboard 引用的内容：[www.veryhuo.com]
<div id="nav"> <ul> <li class="borderleft"><a href="http://www.veryhuo.com" target="_blank">烈火首页</a></li> <li><a href="http://www.veryhuo.com" target="_blank">站长资讯</a> <ul> <li class="top"><a href="http://www.veryhuo.com" target="_blank">厂商企业</a></li> <li><a href="http://www.veryhuo.com" target="_blank">站长茶馆</a></li> <li><a href="http://www.veryhuo.com" target="_blank">网站在线</a></li> </ul> </li> <li><a href="http://www.veryhuo.com" target="_blank">网站运营</a> <ul> <li class="top"><a href="http://www.veryhuo.com" target="_blank">SEO优化</a></li> <li><a href="http://www.veryhuo.com" target="_blank">建站心得</a></li> <li><a href="http://www.veryhuo.com" target="_blank">推广策划</a></li> </ul> </li> <li><a href="http://www.veryhuo.com" target="_blank">网站设计</a> <ul> <li class="top"><a href="http://www.veryhuo.com" target="_blank">Web开发</a></li> <li><a href="http://www.veryhuo.com" target="_blank">图像设计</a></li> <li><a href="http://www.veryhuo.com" target="_blank">酷站欣赏</a></li> </ul> </li> <li><a href="http://bbs.liehuo.net" target="_blank">站长论坛</a></li> </ul> </div> The css 引用的内容：[www.veryhuo.com]
*{ margin:0px; padding: 0px; } #nav { font-family: arial, sans-serif; position: relative; width: 390px; height:56px; font-size:14px; color:#999; margin: 0 auto; } #nav ul { list-style-type: none; } 在这一步我们给<li>设置左浮动让整个导航水平.并且设置相对,记<li>成为一个祖元素,这样我们下面就可以利用到绝对定位了. Copy to Clipboard引用的内容：[www.veryhuo.com]
#nav ul li { float: left position: relative; } 在这一步我们给<a>标签设置一个样式被它看起来像一个按扭(div css教程-如何使用css创建一个类似按扭的导航) Copy to Clipboard引用的内容：[www.veryhuo.com]
#nav ul li a { text-align: center; border-right:1px solid #e9e9e9; padding:20px; display:block; text-decoration:none; color:#999; } 最重要的部分 引用的内容：[www.veryhuo.com]
#nav ul li ul { display: none } #nav ul li:hover ul { display: block; position: absolute; } （编辑：淮安站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
