为了seo优化,导航栏最好标签语义化。
最符合语义的莫过于ul,li。在采用多级标签时,可采用控制二级标签ul位置的方式来进行显隐。
效果如下:
http://jsfiddle.net/tcyangli/mb5yL4uk/
具体的html代码:
.dropdown,ul{margin: 0;padding: 0;list-style: none;float: left;border: 1px solid #486b02;background: #8bd400;border-left: 0;}
.dropdown li{float: left;width:8em;text-align: center;border-left: 1px solid red;}
.dropdown li ul{position: absolute;left: -999em;width: 8em;}
.dropdown li li{border-bottom: 1px solid red;border-left: 0;}
.dropdown li:hover ul{left: auto;}
.dropdown a{text-decoration: none;display: block;color:#2b3f00;}
.dropdown a:hover,.dropdown a:focus{color: #e4ffd3;background: #6da203;}
<ul class="dropdown">
<li><a href="#">home</a></li>
<li><a href="#">products</a>
<ul>
<li><a href="#2">silverback</a></li>
<li><a href="#2">fontdeck</a></li>
</ul>
</li>
<li><a href="aa"></a>services
<ul>
<li><a href="ad">design</a></li>
<li><a href="ad">development</a></li>
<li><a href="ad">consultancy</a></li>
</ul>
</li>
<li><a href="ds">contact us</a></li>
</ul>