久久久久亚国产电影一|午夜日本永久乱码免费播放片|男女性高爱潮是免费国产|久久国产乱子伦精品视频免费

  • <td id="6yqwu"></td>
  • <td id="6yqwu"></td>
    <button id="6yqwu"><samp id="6yqwu"></samp></button>
  • CSS技巧分享:如何用css制作橫排二級下拉菜單

    凝安

    工具/材料

    notepad++

    瀏覽器

    打開Notepad++,先輸入個頁面框架

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <hade>

    </hade>
    <body>


    </body>

    CSS技巧分享:如何用css制作橫排二級下拉菜單

    框架好了,那么就該定義頁面的title,關(guān)鍵詞keyword,和描述description

    <meta charset="UTF-8" content="text/html" http-equiv="content-type">
    <title>純css二級導航下拉菜單</title>
    <meta name="keyword" content="搜狗略懂">
    <meta name="description" content="描述">
    這些內(nèi)容只能在<head></head>中完成。

    CSS技巧分享:如何用css制作橫排二級下拉菜單

    定義頁面使用的css樣式,也是需要在<head>里定義的。

    <style type="text/css">

    * {
    margin:0;
    padding:0;
    }
    .jiao ul li a:hover{
    color:#red;
    }

    ul, li {
    list-style:none;
    }

    a {
    text-decoration:none;
    }

    .jiao {
    border:5px solid #pink;
    border-right:none;
    overflow:hidden;
    float:left;
    margin:200px 0 0 600px;
    }
    .jiao ul li ul li a {
    border-right:solid;
    border-top:2px dotted #666;
    background:#black;
    }
    .jiao>ul>li { float:left;}

    .jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}



    .jiao ul li ul { position:absolute; display:none;}


    .jiao ul li:hover ul{ display:block; }
    .jiao>ul>li>ul>li { float:none;}
    <!--nav>ul只選擇nav下一級里面的ul元素
    nav ul選擇nav內(nèi)所包含的所有ul元素

    nav>ul比nav ul限定更嚴格,必須后面的元素只比前面的低一個級別。
    這里根據(jù)你的需求來自己定義。
    -->
    </style>

    CSS技巧分享:如何用css制作橫排二級下拉菜單

    添加一個DIV標簽,在頁面中劃分出一個塊來,用來顯示。

    div中所用的樣式為剛才咱們聲明的樣式“jiao”這個盒子來描述

    CSS技巧分享:如何用css制作橫排二級下拉菜單

    然后使用無序標簽<ul>+樣式<li> 來實現(xiàn)模塊。

    <div class="jiao">

    <ul>

    <li><a href="#">搜狗略懂</a>

    <ul>

    <li><a href="#">搜狗問問</a></li>

    <li><a href="#">搜狗輸入法</a></li>

    <li><a href="#">搜狗瀏覽器</a></li>

    <li><a href="#">搜狐</a></li>

    </ul>
    </div>

    CSS技巧分享:如何用css制作橫排二級下拉菜單

    放上全部的代碼吧,可以參考一下啊,

    <!DOCTYPE html >

    <html xmlns="http://www.w3.org/1999/xhtml">//允許你通過一個網(wǎng)址來識別你的標記

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keyword" content="利用css實現(xiàn)下拉菜單">
    <meta name="description" content="搜狗略懂、css分享">
    <title>css實現(xiàn)下拉導航欄菜單</title>

    <style type="text/css">

    * {
    margin:0;
    padding:0;
    }
    .jiao ul li a:hover{
    color:#red;
    }

    ul, li {
    list-style:none;
    }

    a {
    text-decoration:none;
    }

    .jiao {
    border:5px solid #pink;
    border-right:none;
    overflow:hidden;
    float:left;
    margin:200px 0 0 600px;
    }
    .jiao ul li ul li a {
    border-right:solid;
    border-top:2px dotted #666;
    background:#black;
    }
    .jiao>ul>li { float:left;}

    .jiao ul li a { width:150px; height:80px; text-align:center; line-height:100px; display:block; border-right:5px solid #red; background:#red; color:#red;}



    .jiao ul li ul { position:absolute; display:none;}


    .jiao ul li:hover ul{ display:block; }
    .jiao>ul>li>ul>li { float:none;}
    <!--nav>ul只選擇nav下一級里面的ul元素
    nav ul選擇nav內(nèi)所包含的所有ul元素

    nav>ul比nav ul限定更嚴格,必須后面的元素只比前面的低一個級別。
    這里根據(jù)你的需求來自己定義。
    -->




    </style>

    </head>

    <body>

    <div class="jiao">

    <ul>

    <li><a href="#">搜狗略懂</a>

    <ul>

    <li><a href="#">搜狗問問</a></li>

    <li><a href="#">搜狗輸入法</a></li>

    <li><a href="#">搜狗瀏覽器</a></li>

    <li><a href="#">搜狐</a></li>

    </ul>

    </li>


    </ul>

    </div>

    </body>

    </html>

    CSS技巧分享:如何用css制作橫排二級下拉菜單

    如果要添加更多的菜單,只需要后邊繼續(xù)添加<ul>/<li>即可

    CSS技巧分享:如何用css制作橫排二級下拉菜單

    特別提示

    寫代碼過程中一定要記得換行,開頭留空,否則過后找東西,連你自己都不知道寫的是什么。何談從哪里找起?