Pure CSS to implement drop-down menus

For the drop-down menu in the navigation bar, we have the most encountered drop-down menu in the project,

In general, we are commonly used JavaScript to achieve the function of down. But

We all know that when we are in the coding process, if you can use CSS to achieve the function, do not use JS to control,

This is because for the computer, JS performance is far less stable than CSS, so, for the drop-down menu we can also be implemented with CSS.

HTML section:

1 <ulID= "Headertabs">2     <Li>3         <ahref= "/found/traders/list.html"class= "title">Home</a>4     </Li>5     <Li>6         <ahref= "/found/ib/ibaccount/iblist.html"class= "title">Public fund</a>7         <Divclass= "Tabnav">8             <P><spanclass= "Iconfont">& #xe663;</span></P>9             <P><ahref="">Fund ranking</a></P>Ten             <P><ahref="">Preferred funds</a></P> One             <P><ahref="">Fund fixed investment</a></P> A             <P><ahref="">Fixed investment ranking</a></P> -         </Div> -     </Li> the     <Li> -         <ahref= "/found/calendar/index.html"class= "title">Fund information</a> -         <Divclass= "Tabnav"> -             <P><spanclass= "Iconfont">& #xe663;</span></P> +             <P><ahref="">Fund News</a></P> -             <P><ahref="">Fund view</a></P> +             <P><ahref="">Fund News</a></P> A             <P><ahref="">Fund research</a></P> at             <P><ahref="">Fund schools</a></P> -         </Div> -     </Li> - </ul>

CSS section:

1 #headerTabs Li{2 position:relative;3 float: Left;4 width:180px;5 Height:50px;6 Line-height:50px;7 text-align:Center;8}9 //drop-down menu box div. Tabnav is hidden by default and is absolutely positioned under this navigationTen #headerTabs. Tabnav{ One Display:None; A position:Absolute; - Top:50px; -  Left:0px; the Z-index: -; -} - //When the mouse is over the navigation, the dropdown menu box div. Tabnav Display - #headerTabs Li:hover. Tabnav{ + Display:Block; -} +  A             

Effect:

Note:

1. In order to be compatible with IE needs to give the drop-down content box to set the level z-index, otherwise under IE browser will appear, the drop-down content is obscured by other content, thus affects the effect.

2. Just and must be the parent element of the box element that gives the drop-down content, that is, the navigation bar element, add the hover attribute, and no longer add the drop-down box element.

Above, purely personal humble opinion, if there is improper, please point out, thank you!

Pure CSS to implement drop-down menus