纯CSS实现的二级菜单

模板网 2014-09-15

纯CSS实现的二级菜单,完全采用CSS样式来实现的,为添加任何JS代码。

主要利用了CSS伪类hover来实现的,代码简单容易理解。

相比较采用JS或者jQuery库实现的二级菜单,代码量极少。

效果截图:

纯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=b2312" />
<title>纯CSS实现的二级菜单</title>
<style>
* {
	margin:0;
	padding:0;
}
a {
	text-decoration:none;
}
#mainnav {
	width: 100%;
	background: #3aaee7;
}
#inmainnanv {
	width: 990px;
	margin: 0 auto;
	height: 43px;
	position: relative;
}
#inmainnanv ul li, #inmainnanv ul a {
	float: left;
	display: block;
	width: 99px;
	height: 43px;
	line-height: 43px;
	text-align: center;
	font-size: 14px;
	color: #fff;
}
#inmainnanv ul li {
	position: relative;
}
#inmainnanv ul a:hover {
	background: #0497e4;
}
#inmainnanv ul li ul li, #inmainnanv ul li ul li a {
	width: 99px;
	height: 43px;
	background: #3aaee7;
	color: #fff;
	float: left;
}
#inmainnanv ul li ul {
	display: none;
}
#inmainnanv ul li:hover ul {
	display: block;
	position: absolute;
	left: 0;
	top: 43px;
	width: 99px;
	height: auto;
}
</style>
</head>
<body>

<div id="mainnav">
  <div id="inmainnanv">
    <ul>
      <li class="inlist"><a href="#">栏目1</a></li>
      <li class="inlist"><a href="#">栏目2</a>
        <ul>
          <li><a href="#">二级栏目1</a></li>
          <li><a href="#">二级栏目2</a></li>
		  <li><a href="#">二级栏目3</a></li>
          <li><a href="#">二级栏目4</a></li>
        </ul>
      </li>
      <li class="inlist"><a href="#">栏目3</a>
		<ul>
          <li><a href="#">二级栏目1</a></li>
          <li><a href="#">二级栏目2</a></li>
		  <li><a href="#">二级栏目3</a></li>
          <li><a href="#">二级栏目4</a></li>
        </ul>
	  </li>
      <li class="inlist"><a href="#">栏目4</a></li>
      <li class="inlist"><a href="#">栏目5</a></li>
      <li class="inlist"><a href="#">栏目6</a></li>
      <li class="inlist"><a href="#">栏目7</a></li>
      <li class="inlist"><a href="#">栏目8</a></li>
      <li class="inlist"><a href="#">栏目9</a></li>
    </ul>
  </div>
</div>

</body>
</html>

相关文章

  1. 手机站常用的底部导航条,宽度自适应

    手机站常用的底部导航条,宽度自适应。 代码打包下载: 手机站常用的底部导航条,宽度自适应 效果截图:

  2. DIV的CSS height:100%无效的解决办法

    在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上

  3. CSS改变选中文本背景色和文字颜色

    CSS改变选中文本背景色和文字颜色。 效果截图:

  4. 利用CSS的hover伪类实现的下拉菜单效果

    利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:

  5. 不错的CSS重置代码base.css

    今天发下我自己的 css 框架base.css,作用是重设浏览器默认样式和提供通用原子类。 使用方法:直接将以上文本框中的CSS代码全选复制保存为base.css文件,在网页中引用即可。 来源:http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html

随机推荐

  1. 手机站常用的底部导航条,宽度自适应

    手机站常用的底部导航条,宽度自适应。 代码打包下载: 手机站常用的底部导航条,宽度自适应 效果截图:

  2. DIV的CSS height:100%无效的解决办法

    在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上

  3. CSS改变选中文本背景色和文字颜色

    CSS改变选中文本背景色和文字颜色。 效果截图:

  4. 利用CSS的hover伪类实现的下拉菜单效果

    利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:

  5. 不错的CSS重置代码base.css

    今天发下我自己的 css 框架base.css,作用是重设浏览器默认样式和提供通用原子类。 使用方法:直接将以上文本框中的CSS代码全选复制保存为base.css文件,在网页中引用即可。 来源:http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html