:
CSS code:
*{
margin:0;
padding:0;
Text-decoration:none;
}
. Nav {
margin:30px Auto;
width:800px;
height:30px;
Background: #FF5640;
}
. NAV > Ul > li {
List-style:none;
Float:left;
font-size:13px;
width:130px;
height:30px;
line-height:30px;
Text-align:center;
}
. Nav A:link,
. Nav a:visited {
Color: #fff;
}
. Nav ul > li:hover{
Background: #FF3E3E;
}
. sec-nav {
Display:none;
width:128px;
height:118px;
border:1px solid #FF3E3E;
}
. Sec-nav > Ul > li{
List-style:none;
font-size:13px;
line-height:30px;
Text-align:center;
}
. Sec-nav Li:hover {
Background: #FF3E3E;
}
. Sec-nav A:link,
. Sec-nav a:visited{
Color: #FF3E3E;
}
. Sec-nav Li:hover > a {
Color: #fff;
}
. Nav li:hover. sec-nav{
Display:block;
}
. jian:after {
width:0;
height:0;
BORDER:4PX solid #fff;
Border-color: #FFF transparent transparent transparent;
Content: "";
Display:inline-block;
margin-left:10px;
Vertical-align:middle;
}
. Nav li:hover > a:after{
Margin-top: -10px;
BORDER:4PX solid #fff;
Border-color:transparent transparent #FFF transparent;
}
HTML Part code:
<! DOCTYPE html>
<link rel= "stylesheet" href= "Style.css"/>
<body>
<div class= "NAV" >
<ul>
<li><a href= "#" > Home </a></li>
<li>
<a class= "Jian" href= "#" > Product information </a>
<div class= "Sec-nav" >
<ul>
<li><a href= "#" > Product information </a></li>
<li><a href= "#" > Product information </a></li>
<li><a href= "#" > Product information </a></li>
<li><a href= "#" > Product information </a></li>
</ul>
</div>
</li>
<li><a class= "Jian" href= "#" > About Us </a>
<div class= "Sec-nav" >
<ul>
<li><a href= "#" > About Us </a></li>
<li><a href= "#" > About Us </a></li>
<li><a href= "#" > About Us </a></li>
<li><a href= "#" > About Us </a></li>
</ul>
</div>
</li>
<li><a class= "Jian" href= "#" > Business Information </a>
<div class= "Sec-nav" >
<ul>
<li><a href= "#" > Business Information </a></li>
<li><a href= "#" > Business Information </a></li>
<li><a href= "#" > Business Information </a></li>
<li><a href= "#" > Business Information </a></li>
</ul>
</div>
</li>
<li><a href= "#" > Join us </a></li>
<li><a href= "#" > Contact Us </a></li>
</ul>
</div>
</body>
Div+css Level Two Menu