CSS技巧分享：如何用css製做橫排二級下拉菜單

時間 2019-11-17

原文原文鏈接

導航菜單是每一個網站所必備的功能，也是每一個學習製做網站的朋友所必須接觸的，如何用css樣式製做一個簡單漂亮的二級下拉菜單呢，下來小編就一步一步教你們來製做橫排二級下拉菜單，讓我共同來學習吧。
首頁咱們打看dreamweaver或其它編輯器，建立一個名爲nav的導航菜單css

<div class="nav">     
        <ul>         
            <li><a href="#">欄目一</a></li> 
            <li><a href="#">欄目二</a></li>
            <li><a href="#">欄目三</a></li>
            <li><a href="#">欄目四</a></li>
            <li><a href="#">欄目五</a></li>
        </ul>
    </div>

以下圖所示：

CSS技巧分享：如何用css製做橫排二級下拉菜單
如今咱們爲nav添加樣式,首先去掉默認的margin和padding，再去掉html

標籤的默認下劃線。接下來再添加適當的樣式（根據實際須要添加）進行美化，如一下樣式：

* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
.nav ul li { float:left;}
.nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;}
.nav ul li a:hover{ color:#f00; }

打開頁面預覽效果
CSS技巧分享：如何用css製做橫排二級下拉菜單
CSS技巧分享：如何用css製做橫排二級下拉菜單
像這樣，一個菜單橫向菜單就建好了，下來咱們給欄目一，欄目二，欄目三，添加二級下拉菜單

<div class="nav">
  <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>
    <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>
    <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>
            <li><a href="#">二級欄目</a></li>
        </ul>
    </li>
    <li><a href="#">欄目四</a></li>
    <li><a href="#">欄目五</a></li>
  </ul>
</div>

CSS技巧分享：如何用css製做橫排二級下拉菜單
添加完二級欄目後，如今咱們開始添加css樣式，首先給jquery

標籤下的

標籤的作浮動樣式，再適當修改標籤，如一下樣式：
.nav ul li ul { position:absolute;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
咱們刷新頁面預覽下效果

CSS技巧分享：如何用css製做橫排二級下拉菜單
接下來咱們隱藏掉二級下來菜單，並給它添加鼠標滑動效果，使得當鼠標滑動到主欄目時，二級下來菜單顯示，樣式以下：
.nav ul li ul { position:absolute; display:none;}
.nav ul li ul li { float:none;}
.nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
.nav ul li:hover ul{ display:block; }
再次預覽效果，以下圖所示：
CSS技巧分享：如何用css製做橫排二級下拉菜單
至此，橫向二級下拉菜單就製做完成了，這裏附加上所有代碼，以方便各位朋友參考，感謝各位朋友的瀏覽。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>橫排二級下拉菜單</title>
<style type="text/css"> * { margin:0; padding:0;} ul, li { list-style:none;} a { text-decoration:none;} .nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;} .nav ul li { float:left;} .nav ul li a { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px solid #ccc; background:#eee; color:#666;} .nav ul li a:hover{ color:#f00; } .nav ul li ul { position:absolute; display:none;} .nav ul li ul li { float:none;} .nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;} .nav ul li:hover ul{ display:block; } </style>
</head>
<body>
<div class="nav">
  <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>
    <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>
    <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>
        <li><a href="#">二級欄目</a></li>
      </ul>
    </li>
    <li><a href="#">欄目四</a></li>
    <li><a href="#">欄目五</a></li>
  </ul>
</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。