Home > Developer > Web Develop
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> drop-down list </title>
<meta charset= "Utf-8"/>
<style type= "Text/css" >
* {
padding:0;
margin:0;
List-style:none;
}
. UL {
width:550px;
height:30px;
margin:100px Auto;
Background-color:deepskyblue;
padding-left:10px;
}
. UL Li {
Float:left;
width:100px;
height:30px;
line-height:30px;
Text-align:center;
margin-right:10px;
_display:inline;
position:relative;
}
. UL ul{
Display:none;
Position:absolute;
}
</style>
<script type= "Text/javascript" src= "Jquery/jquery-1.7.2.min.js" ></script>
<script type= "Text/javascript" >
$ (function () {
$ ('. Ul>li '). MouseOver (function (e) {
$ (this). Children (). Stop (). Slidedown (500); Slide down Speed 500ms
});
$ ('. Ul>li '). Mouseout (function (e) {
$ (this). Children (). Stop (). Slideup (500); The speed of the swipe up 500ms
});
});
</script>
<body>
<ul class= "ul" >
<li>
Boss
<ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
Boss <ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
Boss <ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
Boss <ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
<li>
Boss <ul>
<li>laoer</li>
<li>laoer</li>
<li>laoer</li>
</ul>
</li>
</ul>
</body>
Note: The animations and events in jquery follow a principle called the queueing mechanism, which means that if a trigger executes a lot of animations at once, then the animation behind it will not automatically replace the previous animation, but will always be queued for execution;
Workaround: Use the Stop () method to empty the queue before performing the animation.
Drop-down list (web), implemented with jquery
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
