纯CSS实现的二级菜单
纯CSS实现的二级菜单,完全采用CSS样式来实现的,为添加任何JS代码。
主要利用了CSS伪类hover来实现的,代码简单容易理解。
相比较采用JS或者jQuery库实现的二级菜单,代码量极少。
效果截图:
<!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>
相关文章
- JS+CSS简单实现DIV遮罩层显示隐藏
Copy上面的代码到HTML页面即可查看效果。 原理比较简单,就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时,通过JS去控制两个DIV的样式:display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index,显示在最
- 手机站常用的底部导航条,宽度自适应
手机站常用的底部导航条,宽度自适应。 代码打包下载: 手机站常用的底部导航条,宽度自适应 效果截图:
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:
- 手机站头部超赞QQ邀请效果
手机站头部超赞QQ邀请效果,已整理为JS调用代码,方便直接引入网页调用。 打包下载: 手机站头部超赞QQ邀请效果 效果截图:
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上
随机推荐
- JS+CSS简单实现DIV遮罩层显示隐藏
Copy上面的代码到HTML页面即可查看效果。 原理比较简单,就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时,通过JS去控制两个DIV的样式:display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index,显示在最
- 手机站常用的底部导航条,宽度自适应
手机站常用的底部导航条,宽度自适应。 代码打包下载: 手机站常用的底部导航条,宽度自适应 效果截图:
- 利用CSS的hover伪类实现的下拉菜单效果
利用CSS的hover伪类实现的下拉菜单效果,未使用任何js代码,简单方便。 效果截图:
- 手机站头部超赞QQ邀请效果
手机站头部超赞QQ邀请效果,已整理为JS调用代码,方便直接引入网页调用。 打包下载: 手机站头部超赞QQ邀请效果 效果截图:
- DIV的CSS height:100%无效的解决办法
在设置DIV高度的时候,会用到一个height:100%的大小,来让div撑满浏览器高度。但是我们会发现,直接在div中写上style:height:100%;是无效的。 那么如何才能让div的css height:100%生效呢?解决办法很简单,同时也能适配多个浏览器。 方法就是在css当中增加上