Advantage: You can also click the body area to hide the drop-down menu and it does not conflict with the existing onclick event of the body.
Disadvantages: Please point it out and accept it modestly!
The code in the running box seems numerous and helpless. Please download the attachment for better observation or modification ~!
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> drop-down menu </title> <style type =" text/css "> body {margin: 20px auto; font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 950px; height: 400px; border: solid 1px # aaa; position: relative; padding: 10px;} ul {margin: 0; padding: 0; list-style: none ;}. dropDownList {position: absolute; left: 100px; top: 100px ;}/*. dropDownList div. dropdown select {display: none ;}*/. dropDownList div. dropdown {float: left; margin-right: 50px; width: 200px ;}. dropDownList span {display: block; width: 146px; height: 26px; background: url (http://3.bp.blogspot.com/_bdBPvgEipxw/SRMUkLCdX0I/AAAAAAAAAP8/HgD XLapwpAw/s320/select.gif) left top no-repeat; line-height: 26px; text-indent: 12px; border: solid 1px #83BBD9; cursor: default ;}. dropDownList span. over {background-position: left bottom; border-color: # B4C91A ;}. dropDownList ul {background: # eee; width: 200px; display: none ;}. dropDownList ul li {height: 20px; width: 100%; padding: 3px 0; text-indent: 12px; cursor: default ;}. dropDownList ul li. over {background: # ccc ;}. dropD OwnList ul. show {display: block ;}</style> </pead> <body> simulate the drop-down menu in JavaScript, and make a hasty attempt to accept criticism. </Body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]