JavaScript simulation drop-down menu code_form effects

Advantages: Clicking the body area can also hide the drop-down menu, and it will not conflict with the existing onclick event of the body.
Disadvantages: Please point them out and accept them with an open mind!
The code of the run box seems to be numerous, which is really frustrating. Please download the attachment for better observation or modification~!

<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/HgDXLapwpAw/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;} .dropDownList ul.show{display:block;} </style> <h1>JavaScript simulates a drop-down menu, done in a hurry, accept criticism humbly. </h1> <form action="#" method="get"> <div class="dropDownList"> <div id="dropDownList1" class="dropdown"> <select name="birthday"> <option>Please select</option> <option>1988</option> <option>1989</option> </select> <span>Please select a year</span> <ul></ul> </div> <div id="dropDownList2" class="dropdown"> <select name="sex"> <option>Gender</option> <option>Male</option> <option>Female</option> </select> <span>Please select gender</span> <ul></ul> </div> <div id="dropDownList3" class="dropdown"> <select name="student"> <option>Kindergarten class</option> <option>Primary School</option> <option>Junior High School</option> </select> <span>Please select your education level</span> <ul></ul> </div> </div> </form>