Home > Developer > Web Develop
Well...... In the practice can understand the idea, but also for later use when convenient, did the next drop-down list of implementation, really hands is the truth Ah!
HTML sectionThere is nothing to say, directly on the code bar:
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"/> <Linktype= "Text/css"rel= "stylesheet"href= "Sheet.css"> <title>drop-down list</title></Head><Body> <Divclass= "Main"> <ul> <Li> <ahref="">Animal</a> <ul> <Li><ahref="">Dog</a></Li> <Li><ahref="">Cat</a></Li> <Li><ahref="">Fox</a></Li> </ul> </Li> <Li> <ahref="">Human</a> <ul> <Li><ahref="">Mans</a></Li> <Li><ahref="">Woman</a></Li> </ul> </Li> <Li> <ahref="">Flower</a> <ul> <Li><ahref="">Tulip</a></Li> <Li><ahref="">Rose</a></Li> </ul> </Li> </ul> <Scripttype= "Text/javascript"src= "Downul.js"></Script> </Div></Body></HTML>CSS Implementation
Simple HTML code is still relatively monotonous, first to modify its style, at least ... can look down.
. main{ width:400px; margin:100px Auto;}. Main ul li{ List-style:none;}. Main ul Li a{ display:block; width:100%; height:40px; Background: #999; font:20px/40px ""; Text-align:center; Color: #fff; margin-bottom:5px; Text-decoration:none;}
. Main UL Li A:hover{
Background: #666;
border-bottom:1px dashed #FF0000;
}
When this comes down, it becomes:
After that, we'll first hide the level two list:
. Main ul Li ul{ display:none;}This effect is:
As you can see, the level two list has not been shown, and we have reached a preliminary idea. Then, to implement the drop-down list, that is, when the mouse is placed in the corresponding level list bar, its corresponding level two list appears. Know the demand, so good to do, a simple hover can be:
. Main UL li:hover ul{ Display:block;}In this way, the effect of CSS is completed.
JS implementationThis is a little more trouble than CSS, need to use the function, then, first use CSS to do a good job, and then, hide and display with JS implementation.
The JS code is directly written down:
function Showul (li) { var submenu=li.getelementsbytagname ("ul") [0]; SubMenu.style.display= "block"; } function Hiddenul (li) { var submenu=li.getelementsbytagname ("ul") [0]; SubMenu.style.display= "None"; }Two functions, one for display, and one for hiding.
Next, write down the statement that invokes the function in the <li> tag of the first level list:
<onMouseOver= "Showul (this)" onmouseout= "Hiddenul (this)" >
This achieves the same effect as the CSS.
Drop-down list: pure CSS Implementation +JS implementation
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
