html导航栏-简单运用display设置左拉和下拉导航栏

运用display的block设置左拉导航栏,设置下拉导航栏。

1左拉导航栏

index.html

<div class="div1">
    <ul>
    <li class="dao li1">第一级d导航
    <ul class="sub sub1">
        <li class="main">heheh</li>
        <li class="mian">heheh</li>
        <li class="main">heheh</li>
    </ul>
    </li>
    <li class="dao li2">第二级导航
    <ul class="sub sub2">
    <li class="main2">skdjfld</li>
    <li class="main2">skdjfld</li>
    <li class="main2">skdjfld</li>
    </ul>
    </li>
    <li class="dao li3">第三季导航
    <ul class="sub sub3">
    <li class="main3">dfasdf</li>
    <li class="main3">dfasdf</li>
    <li class="main3">dfasdf</li>
    </ul>
    </li>
    </ul>
</div>

index.css

 *{
            margin: 0;
            padding:0;
        }
        li{
            list-style: none;
        }
        .div1{
            width: 100px;
            height: 120px;
            background: #aa1111;
            margin: 100px;
            border:1px solid #ccc;
            border-bottom:none;

        }
        ul{
            list-style: none;
            margin: 0px;
            padding: 0px;
            /*text-align: center;*/
        }
        .dao{
            width:100%;
            height:40px ;
            line-height: 40px;
            position: relative;
            /*padding:0px;*/
            border-bottom: 1px solid #ccc;
        }
        .sub{
            position: absolute;
            left: 100px;
            background: #494A5F;
            top:0;
            display: none;
        }
        .li1:hover .sub1{
            display: block;
        }
        .li2:hover .sub2{
            display: block;
        }
        .li3:hover .sub3{
            display: block;
        }

主要构思是：将<li>中的<ul>部分用display：none隐藏。当：hover时应display：block来出现左导航。

下拉导航：

index.html

<ul class="ul1">
        <li class="li1">hah
            <ul class="second">
                <li>doudou</li>
                <li>doudou</li>
            </ul>
        </li>
        <li class="li2">haerh</li>
        <li class="li3">haaah</li>
    </ul>

css

*{
            margin:0;
            padding: 0;
        }
        .ul1{
            display: inline-block;
            /*text-decoration: none;*/
            width: 300px;
            height: 40px;
            margin: 150px;
            float: left;
            position: relative;
        }
        li{
            text-align: center;
            line-height: 40px;
            list-style: none;
            display: block;
            background: #2fa0ec;
            border:1px solid;
            width: 100px;
            height:40px ;
        }
        .li1{
            width: 100px;
            height: 40px;
            position: absolute;
            float: left;
        }
        .li2{
            width: 100px;
            height: 40px;
            display: block;
            position: absolute;
            float: left;
            left: 100px;
        }
        .li3{
            width: 100px;
            height: 40px;
            display: block;
            position: absolute;
            float: right;
            left: 200px;
            top:0;
        }
        .second{
            top:40px;
            left: -2px;
            border: 1px solid #ccc;
            display: none;
            position: absolute;
            margin: 0;
        }
        li:hover{
            background: #AA66EE;
        }
        .li1:hover .second{
            /*display: inline-block;*/
            display: block;
        }

通过设置第一级导航的left值那么就依次float在左边。