写文章

css鼠标悬浮二级下拉导航菜单

快乐打工仔 分类：实例代码

本章节分享一段代码实例，它实现了鼠标悬浮出现二级下拉导航菜单的功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  background-color: #ccc;
}
#nav {
  background-color: #0593d3;
  width: 698px;
  height: 40px;
  margin: 100px auto;
  border: 1px solid #fff;
}
ul {
  list-style: none;
}
ul li {
  position: relative;
  float: left;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #fff;
}
a {
  text-decoration: none;
  display: block;
  color: #fff;
  padding: 0 15px;
  height: 40px;
}
a:hover {
  color: #000;
  background-color: #77b6f9;
}
ul li ul {
  position: absolute;
  left: 0;
  top: 40px;
  display: none;
}
ul li ul li {
  float: none;
  background-color: #0593d3;
  margin-top: 2px;
}
ul li ul li a {
  width: 120px;
}
ul li:hover ul {
  display: block;
}
</style>
</head>
<body>
  <div id="nav">
    <ul>
      <li><a href="#">前端教程网</a></li>
      <li>
        <a href="#">前端专区</a>
        <ul>
          <li><a href="#">css教程</a></li>
          <li><a href="#">div教程</a></li>
        </ul>
      </li>
      <li>
        <a href="#">资源下载</a>
        <ul>
          <li><a href="#">特效下载</a></li>
          <li><a href="#">图片下载</a></li>
        </ul>
      </li>
      <li><a href="#">js教程</a></li>
      <li><a href="#">json教程</a></li>
      <li><a href="#">正则表达式教程</a></li>
    </ul>
  </div>
</body>
</html>

上面的代码实现了我们的要求，下面介绍一下它的实现过程。

一.代码注释:

* {
  margin: 0;
  padding: 0;
}

上面的代码实现了简单的css重置功能，将外边距和内边距全部设置为0。

更全面的可以参阅css预重置样式代码一章节。

body {
  background-color: #ccc;
}

设置页面背景颜色。

#nav {
  background-color: #0593d3;
  width: 698px;
  height: 40px;
  margin: 100px auto;
  border: 1px solid #fff;
}

上面的代码是设置导航栏容器的样式。

比如背景颜色，宽度高度，还有水平居中等。

border: 1px solid #fff这个实现白色边框效果。

ul {
  list-style: none;
}

去掉列表自带的样式。

ul li {
  position: relative;
  float: left;
  line-height: 40px;
  text-align: center;
  border-left: 1px solid #fff;
}

上面的代码设置li为相对定位

并且左浮动，这就实现了主导航的水平排列。

line-height: 40px能够设置文本垂直居中，这个和#nav的height属性是对应的。

a {
  text-decoration: none;
  display: block;
  color: #fff;
  padding: 0 15px;
  height: 40px;
}

上面的代码可以将链接a底部的瞎话先去掉。

并且设置其为块级元素，这样就可以设置它的尺寸。

a:hover {
  color: #000;
  background-color: #77b6f9;
}

上面的代码设置鼠标悬浮于链接上的样式。

ul li ul {
  position: absolute;
  left: 0;
  top: 40px;
  display: none;
}

设置li元素的ul元素的样式，也就是二级导航菜单的样式。

ul li ul li {
  float: none;
  background-color: #0593d3;
  margin-top: 2px;
}

float: none方式继承之前的float:left的设置。

网站出售中，有意者加微信：javadudu

回复

我来回复

  • 暂无回复内容