Special menu effects code and CSS special effect code for Corner folding implemented by pure css
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> CSS rounded corner folding menu </title>
<Style type = "text/css">
# Menu {
Font-size: 12px;
Height: pixel PX;
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 {
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> <br/>
<Span> content 1 </span>
</A>
</Li>
<Li>
<A href = "# nogo">
<B class = "b1"> </B>
<B class = "b2"> </B>
<B class = "h2"> SQL </B> <br/>
<Span> content 2 </span>
</A>
</Li>
<Li>
<A href = "# nogo">
<B class = "b1"> </B>
<B class = "b2"> </B>
<B class = "h2"> access </B> <br/>
<Span> content 3 </span>
</A>
</Li>
</Ul> <B class = "b4"> </B> <B class = "b3"> </B> <B class = "b2"> </B> <B class = "b1"> </B> </div>
<Div> <A href = "http://www.999jiujiu.com/"> http://www.999jiujiu.com/</A> </div>
</Body>
</Html>