Pure CSS Two-level portrait menu
<body>
<div class= "Divda" >
<div class= "NAV" >
<ul>
<li><a href= "#" > Home </a>
<ul>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
</ul>
</li>
<li><a href= "#" > Learn how to use </a>
</li>
<li><a href= "#" > All Requirements </a>
</li>
<li><a href= "#" > International demand </a>
</li>
<li><a href= "#" >play zone </a>
</li>
<li><a href= "#" > Contest channel </a>
<ul>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
</ul>
</li>
<li><a href= "#" > Voice demand </a>
<ul>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
<li><a href= "#" >sun min xiang</a>
</li>
</ul>
</li>
</ul>
</div>
<div class= "Xian" >
</div>
</div>
=====================
@charset "Utf-8";
/* CSS Document */
* {
margin:0px Auto;
padding:0px;
font-size:100%;
/* The size of all text inherits the size of the font set inside the body */
Font:inherit;
/* Font inheritance */
}
Ul
Li {
margin:0px;
padding:0px;
}
Body {
font-size:14px;
Font-family: "Microsoft Jas Black";
Color: #999;
Text-align:center;
}
. Divda {
width:100%;
height:55px;
}
. Nav {
width:1004px;
height:50px;
}
. Nav UL {
width:1004px;
height:50px;
List-style:none;
}
. NAV ul ul {
Visibility:hidden;
position:relative;
width:118px;
}
. Nav UL Li:hover ul,
. Nav UL A:hover ul {
visibility:visible;
}
. NAV ul ul Li {
Clear:both;
Text-align:center;
font-size:14px;
margin:0px;
padding:0px;
padding-top:3px;
}
. NAV ul ul Li a {
Display:block;
width:118px;
border-bottom:1px solid #0C0;
Background-color: #003;
height:20px;
Filter:alpha (opacity=70);
Background-color:rgba (0, 0, 0, 0.7);
}
. NAV ul ul Li a:hover {
Background: #ff8a00;
border-bottom:1px solid #F03;
}
. Nav ul Li {
width:118px;
height:40px;
Float:left;
margin-top:10px;
}
. Nav ul Li a {
padding:10px 0 12px 0;
Display:block;
}
. Nav ul Li A:link,
a:visited {
Text-decoration:none;
Color: #999;
}
. Nav ul Li A:hover {
Background: #ff8a00;
Color: #FFF;
}
. Divda. Xian {
width:100%;
height:5px;
Background: #ff8a00;
}
==========================
Excerpt from web footage
Pure CSS Two-level portrait menu