欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

纯CSS实现圆角折叠菜单的方法

本文实例讲述了纯CSS实现圆角折叠菜单的方法。分享给大家供大家参考。具体实现方法如下:
 

复制代码
代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS圆角折叠菜单</title>
<style type="text/css">
#menu {
font-size:12px;
height:380px;
margin:0; 
padding:0; 
width:180px;
overflow:hidden; 
background:#f0f0f0;
list-style:none;
border-left:1px solid #DDD; 
border-right:1px solid #DDD;
}
#menu li a {
display:block; 
text-decoration:none; 
color:#00b; 
margin:0; 
width:100%;
}
#menu li a span {
display:none; 
color:#000;
height:120px
}
#menu li a.one span {
display:block; 
margin:0 10px;
}
#menu li a:hover {
background:#f1f1f1;
}
#menu li a:hover span {
display:block; 
margin:0 10px; 
cursor:pointer;
}
#menu .h2 {
margin:0 5px; 
padding:0; 
color:#808; 
font-variant:small-caps; 
border:0;
}
#menu .h3 {
margin:0 5px; 
padding:0; 
color:#00b;
}
.curved {
width:180px; 
margin:0 auto;
}
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
font-size:1px; 
display:block; 
background:#88c;
overflow: hidden;
}
.curved .b1, .curved .b2, .curved .b3 {
height:1px;
}
.curved .b2, .curved .b3, .curved .b4 {
background:#f0f0f0; 
border-left:1px solid #DDD; 
border-right:1px solid #DDD;
}
.curved .b1 {
margin:0 4px; 
background:#DDD;
}
.curved .b2 {
margin:0 2px; 
border-width:0 2px;
}
.curved .b3 {
margin:0 1px;
}
.curved .b4 { 
height:2px;
margin:0px;
}
</style> 
</head>
<body>
<div class="curved">
<b class="b1 c1">
</b>
<b class="b2 c2">
</b>
<b class="b3 c3">
</b>
<b class="b4 c4" ></b>
<ul id="menu">
<li>
<a href="/">
<b class="h2">ASP.net</b>
<span>内容1</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="h2">sql</b>
<span>内容2</span>
</a>
</li>
<li>
<a href="#nogo">
<b class="b1"></b>
<b class="b2"></b>
<b class="h2">access</b>
<span>内容3</span> 
</a>
</li>
</ul><b class="b4"></b><b class="b3"></b>
<b class="b2"></b><b class="b1"></b></div>
</body>
</html>

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r50510.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-23 11:29 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。