css實現的二級下拉選單效果

antzone發表於2017-03-31
CSS

本章節分享一段程式碼例項，它使用純css實現了二級下拉選單效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#nav,#nav ul{
  padding:0;
  margin:0;
  list-style:none;
}
#nav li{
  float:left;
  position:relative;
  width:10em;
  border:1px solid #B0C4DE;
  background-color: #E7EDF5;
  color: #2D486C;
  font: 80% Verdana, Geneva, Arial, Helvetica, sans-serif;
  margin-right: 1em;
}
#nav a:link, #nav a:visited{
  display:block;
  text-decoration:none;
  padding-left:1em;
  color:#2D486C;
}
#nav ul{
  display:none;
  position:absolute;
  padding-top:0.5em;
}
#nav ul li{
  float:none;
  border:0 none transparent;
  border-bottom:1px solid #E7EDF5;
  background-color:#F1F5F9;
  font-size: 100%;
  margin: 0;
  margin-bottom:0.5em;
  padding: 0;
}
#nav li:hover ul{
  display:block;
}
</style>
</head>
<body>
<ul id="nav">
  <li><a href="#">螞蟻部落一</a>
    <ul>
      <li><a href="#">css教程</a></li>
      <li><a href="#">js教程</a></li>
      <li><a href="#">jquery</a></li>
    </ul>
  </li>
  <li><a href="#">螞蟻部落二</a>
    <ul>
      <li><a href="#">正則教程</a></li>
      <li><a href="#">div教程</a></li>
      <li><a href="#">html教程</a></li>
    </ul>
  </li>
  <li><a href="#">螞蟻部落三</a>
    <ul>
      <li><a href="#">softwhy.com</a></li>
      <li><a href="#">antzone</a></li>
      <li><a href="#">sass教程</a></li>
    </ul>
  </li>
</ul>
</body>
</html>

相關文章