简单的导航栏实现

为了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="#">homea>li>
        <li><a href="#">productsa>
            <ul>
                <li><a href="#2">silverbacka>li>
                <li><a href="#2">fontdecka>li>
            ul>
        li>
        <li><a href="aa">a>services
            <ul>
                <li><a href="ad">designa>li>
                <li><a href="ad">developmenta>li>
                <li><a href="ad">consultancya>li>
            ul>
        li>
        <li><a href="ds">contact usa>li>
    ul>