简单的导航栏实现

为了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>

　

转载于:https://www.cnblogs.com/accordion/p/4092318.html