Home > Developer > Web Develop
The first thing we need is to make a mouse move to an area there will be a drop-down menu pop-up, so there will be more sub-class content, the sample code is as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <style> *{margin:0; }. Title{Background-color:#2b99ff;Height:50px;Line-height:50px;text-align:Center;Color:#3d2fa2; }. User{width:180px;Height:50px;Margin-left:20px;Background-color:#7a7b50;cursor:Auto; }. User. msg{Display:None;width:200px;Height:40px;float: Left;Border:1px solid Red;Background-color:#787b53;Z-index:2;position:relative; }. User. msg a:hover{cursor:Pointer; }. Clearfix:after{content:"0";Display:Block;Clear:both;Visibility:Hidden;Height:0; }. User:hover. MSG{Display:Block; }. Text{font-size:30px;Color:Black;Background-color:#99aecb;Height:800px;position:Absolute;width:1500px;Z-index:1; } </style></Head><Body> <Divclass= "title"> <Divclass= "User Clearfix">User<Divclass= "MSG"><a>Blog</a></Div> <Divclass= "MSG"><a>Flash</a></Div> <Divclass= "MSG"><a>Integral</a></Div> <Divclass= "MSG"><a>Comments</a></Div> <Divclass= "MSG"><a>Concern</a></Div> </Div> <Divclass= "text">Document content</Div> </Div></Body></HTML>
Implementation of the method: first do a HTML tag, do a basic style out, we want to put the user this box mouse touch after a drop-down menu
After the good effect:
To achieve this function is to pay attention to a few details of the Sibuxiang will do otherwise.
1, the code implementation first need to pay attention to clear float floating. This will allow the background of the drop-down box to be propped up to look at the CSS in the . Clearfix:afttr Method This is a fixed content that is used to clear float.
2,. User. msg Display:none This is the first to hide the drop-down of a few tags then hover the display will re-overwrite the block, make it appear
3 Note that when the drop-down menu is complete, the pop-up screen will be overwritten by the text tag below when you continue to write the following text menu. This time to note that the text will overwrite the pop-up screen does not appear, because they are brothers tags, so we can give them to add z-index properties to change the hierarchy, so that the front of the cover behind, (Z-index must be and position mate)
4 text here with a position=absolute, if not pop-up menu will affect the flow of the document, so that the contents of the document change location.
CSS using hover to make pull-down menu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
