Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery simulates the select list menu effect using ul </title>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
<Style type = "text/css">
<! --
Body {padding: 10px ;}
* {Margin: 0; padding: 0; font-size: 12px ;}
Ul, li {list-style-type: none ;}
. Select_box {width: 150px; border: 1px solid # ccc; padding-right: 20px; padding-left: 10px; background: url(107.gif) no-repeat 160px center; position: relative ;}
. Select_box span {cursor: pointer; display: block; line-height: 25px; width: 100%; height: 25px; overflow: hidden ;}
. Select_box ul li {cursor: pointer ;}
. Son_ul {width: 179px; position: absolute; left: 0; top: 25px; border: 1px dashed # ccc; background: # fff ;}
. Son_ul li {display: block; line-height: 25px; padding-left: 10px; width: 169px}
. Hover {background: # ccc ;}
-->
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('. Son_ul'). hide (); // hide the initial ul
$ ('. Select_box span'). hover (function () {// move the mouse
$ (This). parent (). find ('ul. son_ul '). slideDown (); // find ul. son_ul to display
$ (This ). parent (). find ('lil '). hover (function () {$ (this ). addClass ('hover ')}, function () {$ (this ). removeClass ('hover ')}); // hover Effect of li
$ (This). parent (). hover (function (){},
Function (){
$ (This). parent (). find ("ul. son_ul"). slideUp ();
}
);
}, Function (){}
);
$ ('Ul. son_ul li '). click (function (){
(This%.parents('li'%.find('span'%.html(%(this%.html ());
$ (This). parents ('lil'). find ('ul '). slideUp ();
});
}
);
</Script>
</Head>
<Body>
<Ul id = "main_box">
<Li class = "select_box">
<Span> Select... </span>
<Ul class = "son_ul">
<Li> Option 1 </li>
<Li> Option 2 </li>
<Li> Option 3 </li>
<Li> Option 4 </li>
<Li> Option 5 </li>
</Ul>
</Li>
</Ul>
</Body>
</Html>
Implementation result
Close the work!