Pure CSS to implement drop-down menus

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.