css 定位與選擇器 html+css 實現三級導航三級菜單。

利用css的：hover 實現導航欄的三級定位。

插一下

今天在寫代碼的時候，遇到了連續四個模塊 用同一個樣式，那么怎么單獨選擇呢，如下代碼 使用nth-child選擇第幾個  便是對 使用block 樣式的第二個模塊 進行控制

.block:nth-child(2){
            border: #c9394a solid 2px;
            position: static;
        }

 

進入正題 先上效果圖 

 

 

代碼如下  

CSS 部分

 

    <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
        .image{
            text-align: center;
        }
        .nav{
            position: fixed;
            top: 30%;
            left: 30px;
            background-color: #333;
            color: white;
            font-size: 20px;
            letter-spacing: 2px;
            text-align: center;
            width: 200px;
            line-height: 40px;
        }

        .nav li{
            list-style: none;
            font-size: 20px;
            margin: 1px auto;
            background-color: #cccccc;
           color: black;

        }
        .nav-li ul li {
            display: none;
        }
        .nav-li:hover  ul li{
            display: block;
        }
        .list-c{
            display: none;
        }
       .nav-li li:hover .list-c{
           display: block;
       }
        .nav-li ul li{
            position: relative;
        }
        .list-c{
            position: absolute;
            left: 200px;
            width: 200px;
            background-color: #cccccc;
            top:0;
        }
        .list-3{
            cursor: pointer;
        }
    </style>

 

正文部分

<div class="nav">
        <div class="nav-li">
            <div class="tit">網站導航 </div>
                <ul>
                    <li>二級網站A
                        <div class="list-c">
                        <div class="list-3"> 三級A </div>
                        <div class="list-3"> BBBBB</div>
                        <div class="list-3"> CCCCCCC</div>
                        </div>
                    </li>
                    <li>二級B
                        <div class="list-c">
                            <div class="list-3"> 三級B</div>
                            <div class="list-3"> QQQQQQb</div>
                            <div class="list-3"> WWWWWWWWW</div>
                        </div>
                    </li>
                    <li>二級C
                        <div class="list-c">
                            <div class="list-3"> 三級 C</div>
                            <div class="list-3"> DDDDDDDD</div>

                        </div>
                    </li>
                    <li>二級D
                        <div class="list-c">
                            <div class="list-3"> 三級 三級 三級 三級</div>

                        </div>
                    </li>
                </ul>
        </div>
        <div class="nav-li">
            <div class="tit">實戰課程</div>
        </div>
        <div class="nav-li">
            <div class="tit">就業課程</div>
        </div>
        <div class="nav-li">
            <div class="tit">免費課程</div>
        </div>
        <div class="nav-li">
            <div class="tit">收費課程</div>
        </div>
     </div>