zoukankan      html  css  js  c++  java
  • 简单的导航栏实现

    为了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;8em;text-align: center;border-left: 1px solid red;}
            .dropdown li ul{position: absolute;left: -999em; 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>

     

  • 相关阅读:
    Mint linux中调整屏幕亮度的方法
    poj 1085 Triangle War (状压+记忆化搜索)
    CF1060F Shrinking Tree
    leetcode492
    leetcode258
    leetcode226
    leetcode371
    leetcode104
    leetcode389
    leetcode448
  • 原文地址:https://www.cnblogs.com/accordion/p/4092318.html
Copyright © 2011-2022 走看看