Home >Web Front-end >HTML Tutorial >水平导航菜单(DIV+CSS)_html/css_WEB-ITnose
完全用DIV+CSS做的菜单,相比传统用图片做的打开速度更快。预览最终效果>>
#nav{ height: 44px; width: 425px; background: #FFFFFF;}.vline{ background: #999999; width: 1px; height: 20px;}#nav ul{ margin: 0px; padding: 0px; list-style-type: none;}#nav li{ float: left; font-family: Arial; font-weight: bold; font-size: 12px; text-align: center;}#nav li a{ display: block; width: 84px; line-height: 28px; color: #666666; text-decoration: none; border-top: 4px solid #0F35A5;}#nav li a:hover{ color: #7C8DD9; border-top: 4px solid #7C8DD9;}
<div id="nav"><ul><li><a href="#">产品介绍</a></li><li class="vline"></li><li><a href="#">服务支持</a></li><li class="vline"></li><li><a href="#">联系我们</a></li><li class="vline"></li><li><a href="#">新闻中心</a></li><li class="vline"></li><li><a href="#">公司简介</a></li><li class="vline"></li></ul></div>