Using HTML and CSS to make the drop-down navigation bar more effective

Please indicate the source before quoting: http://www.cnblogs.com/zkhzz/Thank you

By observing the homepage of Baidu, for more products a column, think can not involve JS can write down the effect of the navigation bar

1. Design a broad framework first

　　

<div class= "NAV" >
<ul>
<li><a href= "#" > News </a></li>
<li><a href= "#" >hao123</a></li>
<li><a href= "#" > Maps </a></li>
<li><a href= "#" > Video </a></li>
<li><a href= "#" > Paste </a></li>
<li><a href= "#" > Login </a></li>
<li><a href= "#" > Settings </a>
<ul>
<li><a href= "#" >2</a></li>
<li><a href= "#" >2</a></li>
<li><a href= "#" >2</a></li>
<li><a href= "#" >2</a></li>
</ul>
</li>
<li><a href= "#" > More Products </a>
<ul>
<li><a href= "#" >1</a></li>
<li><a href= "#" >1</a></li>
<li><a href= "#" >1</a></li>
<li><a href= "#" >1</a></li>
<li><a href= "#" >1</a></li>
<li><a href= "#" >1</a></li>
<li><a href= "#" >1</a></li>
<li><a href= "#" >1</a></li>
</ul>
</li>
</ul>
</div>

2. Initialize the style and modify the default unordered list

　　

*{
padding:0;
margin:0;
}
. nav{
width:100%;
height:50px;
Display:block;
position:relative;
}

3. Set the UL under Nav to float so that the list is at the same level and set the Li,a style

. Nav ul{
Display:block;
Float:right;
position:relative;
}
. Nav ul li{
Display:inline-block;
padding:5px;
Text-align:center;
border-left:2px solid #f2f2f2;
position:relative;
}

. Nav ul Li a{
Color: #666;
}

4. One of the important steps is to make it more natural by modifying the display property of the UL under Li so that it is hidden when not hover, while setting the style of the drop-down frame li.

. Nav ul Li ul{
Display:none;
}
. Nav UL Li ul li{
height:55px;
width:50%;
Border-left:none;
border-bottom:2px solid #f2f2f2;

}

5.hover to Hidden UL, modify its display properties to make it appear, while using position's absolute to make it appear natural

. Nav ul Li a:hover{
Color: #06AEDA;
}
. Nav UL Li:hover ul {
Display:block;
Position:absolute;
}

Style All code:

*{
padding:0;
margin:0;
}
. nav{
width:100%;
height:50px;
Display:block;
position:relative;
}
. Nav ul{
Display:block;
Float:right;
position:relative;
}
. Nav ul li{
Display:inline-block;
padding:5px;
Text-align:center;
border-left:2px solid #f2f2f2;
position:relative;
}
. Nav ul Li a{
Color: #666;
}
. Nav ul Li ul{
Display:none;
}
. Nav UL Li ul li{
height:55px;
width:50%;
Border-left:none;
border-bottom:2px solid #f2f2f2;

}
. Nav ul Li a:hover{
Color: #06AEDA;
}
. Nav UL Li:hover ul {
Display:block;
Position:absolute;
}

There are a few deficiencies in the individual's opinion:

The absolute property of 1.position has an effect on adaptive, but I can't think of any way to make it appear normal, I hope Daniel can solve my doubts.

2. Of course, more than one way, but also hope that more friends can put forward other ideas, let me learn from, thank you!

Using HTML and CSS to make the drop-down navigation bar more effective