純CSS實現下拉菜單及下拉容器等（純CSS實現導航條及導航下拉容器）

時間 2019-12-08

原文原文鏈接

雖然網上相似甚至相同的案例有不少，可是我仍是寫下，以記下筆記，也可供你們參考app

但願你們能夠指導批評~~ide

首先咱們以列表ul li 來開始咱們菜單也能夠說導航條的製做：spa

在頁面中咱們首先構建如下XHTML結構：設計

<body>
  <ul id="navWrapper">
    <li>
      <a href="#">Menu A</a>
      <ul>
        <li><a href="#">Menu A, Item 1</a></li>
        <li><a href="#">Menu A, Item 2</a></li>
        <li><a href="#">Menu A, Item 3</a></li>
        <li><a href="#">Menu A, Item 4</a></li>
        <li><a href="#">Menu A, Item 5</a></li>
        <li><a href="#">Menu A, Item 6</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Menu B</a>
      <div id="test"><a href="#">Menu B, Item 1</a></div>
    </li>
  </ul>
  <div id="banner"></div>
  <div id="content">
    <p>Page content here.</p>
  </div>
</body>

View Code

效果：3d

接着，咱們來一步一步設計樣式及功能（先給每一個元素加個邊框以便後續樣式設計區別）：code

樣式代碼：blog

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
</style>

View Code

效果：
文檔

這樣咱們就能夠好區分，好設計了~~get

下面去掉連接的下滑線和列表的「.」「。」，而且使父級的列表橫向排列，子級列表仍是縱向排列，這樣纔像下拉菜單嘛~~（這裏是兩級列表嵌套，一個父級一個子級）it

樣式代碼：

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
    

    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
    }
</style>

View Code

效果：

下面來隱藏子級列表和子級容器（這裏子級容器是指id爲test的div容器），當鼠標移動到父級列表時相對應的子級列表顯現出來，經過「 :hover 」實現，隱藏顯現經過display的「 none 」和「 block 」來實現，注意這裏不用visibility的「 hidden 」和「 visible 」來實現，至於區別你們能夠把相應的屬性換成visibility來看看效果，這裏就不實現了

樣式代碼：

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
    

    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
    }
    

    ul#navWrapper ul,ul#navWrapper div#test{
        display:none;
        position:absolute;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
</style>

View Code

效果：

這裏有一點須要注意，當不設置子級的position爲「 absolute 」時，鼠標移動到父級，出現的子級會在頁面佔據必定的位置，那麼「 Page content here 」將會產生移動，這是十分很差的。因此咱們設置子級「 position:absolute; 」，這樣即可以使它們脫離正常的流程，不影響後面的內容位置！

再將父級位置稍微偏移下和將第一個父級下的本身列表向左偏移與父級邊框對齊，而且給第二個父級下的div容器必定的「容積」

樣式代碼：

<style>
    ul{
        border:1px solid red;
    }
    li{
        border:1px solid lightgreen;
    }
    div{
        border:1px solid black;
    }
    
    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
    }
    ul#navWrapper li ul li{
        float:none;
        
        margin-left:-41px;
    }
    div#banner{
        clear:both;
        
        height:50px;
        margin-top:30px;
    }
    
    ul#navWrapper ul,ul#navWrapper div#test{
        display:none;
        position:absolute;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
    
    ul#navWrapper{
        margin-left:-41px;
    }
    ul#navWrapper div#test{
        height:200px;
        width:600px;
        background:lightgray;
    }
</style>

View Code

效果：

將全部邊框去掉後這裏最基本的結構就設計好了，其餘的樣式能夠隨意調整啦~~

好比：

將全部邊框去掉後，並對總體進行下設計

樣式代碼：

<style>
    body,div,ul,li{
        padding:0;
        margin:0;
    } 
    a{
        text-decoration:none;
    }
    ul#navWrapper li{
        float:left;
        list-style:none;
        
        height:45px;
        line-height:45px;
    }
    ul#navWrapper li ul li{
        float:none;
    }
    div#banner{
        clear:both;
        
        height:50px;
        margin-top:50px;
        margin-left:50px;
    }
    div#content{
        margin-left:50px;
    }
    ul#navWrapper ul{
        display:none;
        position:absolute;
        background:#CCC;
    }
    ul#navWrapper div#test{
        display:none;
        position:absolute;
        height:200px;
        width:600px;
        background:#cde6c7;
    }
    ul#navWrapper li:hover ul,ul#navWrapper li:hover div#test{
        display:block;
    }
    
    ul#navWrapper{
        background:#CCC;
        height:45px;
        width:960px;
        margin:0 auto;
        margin-top:30px;
    }
    
    li a{
        font-size:24px;
        color:#333;
        display:block;
        height:45px;
        padding:0 20px;
    }
    li a:hover{
        color:#fff;
        background:#000;
    }
</style>