純CSS實現的二級導航選單效果程式碼例項

admin發表於2017-03-29
CSS

本章節分享一段程式碼例項，它實現了二級導航選單的功能。

通常二級導航選單要藉助一下js，但是這裡的程式碼是使用純css實現的。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
.menu{
  display:block;
  font-family:arial, sans-serif;
  width:940px;
  position:relative;
  height:auto;
  background: #06F;
}
.menu ul{
  padding:0;
  margin:0;
  list-style-type:none;
}
.menu ul li{
  float:left;
  width:102px;
  background: #03F;
}
.menu ul li.end{
  height:35px;
  float:right;
  width:10px;
  background:#03F;
}
.menu ul li a, .menu ul li a:visited{
  display:block;
  text-align:center;
  text-decoration:none;
  width:104px;
  height:35px;color:#fff;
  line-height:34px;
  font-size:14px;
  background:#03F;
}
.menu ul li.first a, .menu ul li.first a:visited{
  display:block;
  text-align:center;
  text-decoration:none;
  width:110px;
  height:35px;
  color:#fff;
  line-height:34px;
  font-size:14px;
  background: #03F;
}
.menu ul li ul {display:none;}
.menu ul li:hover a{
  color:#000;
  background:#03F;
}
.menu ul li:hover.first a{
  color:#000;
  background:#03F;
}
.menu ul li:hover ul{
  display:block;
  position:absolute;
  left:0;
  top:35px;
  width:805px;
}
.menu ul li:hover ul li a{
  float:left;
  display:block;
  background:#faeec7;
  color:#000;
}
.menu ul li:hover ul li a:hover {
  background:#dfc184;
  color:#000;
}
</style>
</head>
<body>
<div class="menu">
  <ul>
    <li class="first"><a href="#">首頁</a></li>
    <li><a class="hide" href="#">關於我們</a>
      <ul>
        <li><a href="#">螞蟻部落一</a></li>
        <li><a href="#">螞蟻部落二</a></li>
        <li><a href="#">螞蟻部落三</a></li>
        <li><a href="#">softwhy.com</a></li>
      </ul>
    </li>
    <li><a class="hide" href="#">產品展示</a>
      <ul class="right_side">
        <li><a href="#">三級選單內容</a></li>
        <li><a href="#">三級選單內容</a></li>
        <li><a href="#">三級選單內容</a></li>
      </ul>
    </li>
    <li><a class="hide" 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>


相關文章