行使CSS建造简朴的下拉菜单导航
发布时间：2018-09-09 05:53:43 所属栏目：创业 来源：站长网
导读：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; } （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读