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在左邊。