Tip: You can modify some of the code before running
<! 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=utf-8 "/> <title> simple JS pull-down Menu Sample code </title> <style> *{margin:0;padding:0;} a{ Text-decoration:none;color: #666;} Body{font-family:verdana,simsun;font-size:12px;color: #666; Text-align:center;background: #EEE;} li{list-style: none;} #box {width:760px;margin:100px Auto 0 auto;text-align:center;background: #A33236;} #nav {width:720px;height:30px; Margin:0 auto;line-height:30px;} #nav a{display:block;width:90px;height:30px;text-align:center;color: #FFF; #nav li{float:left} #nav li Ul{display: none;position:absolute;margin-left:-20px;} #nav Li ul li{clear:both; #nav Li ul a{width:130px;border-top:1px solid #FFF; Text-align:center;background: #A33236;- Webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s Ease;} #nav Li ul li a:hover{background: #FFF; color: #A33236;} </style> <script>/*-----Display submenu-----/function Display (LI) {var subnav = li.getelementsbytagname ("ul") [0]; SubNav.style.display = "block"; /*-----Hide Submenu-----/function Hide (li) {var subnav = li.getelementsbytagname ("ul") [0]; SubNav.style.display = "None"; </script> </pead> <body> <div id= "box" > <div id= "nav" > <ul> <li onmouseove R= "Display (This)" onmouseout= "Hide (This)" > School Overview <ul> <li><span> School Profile </span></li& Gt <li> School Leadership </li> <li> organization </li> <li> Faculty Setup </li> <li> innovation Platform </li> <li> Impression </li> <li> School Standard interpretation </li> </ul> </li> <li onmouseover= "display (t His) "Onmouseout=" Hide (this) > Teaching Research <ul> <li> Academic Office </li> <li> teaching Management system </li> <li> Quality Courses </li> <li>Science and Technology department </li> <li> Social Science Department </li> <li> Experimental Teaching Demonstration Center </li> <li> Language and text network </li> & Lt;li> Internship Support Network </li> </ul> </li> <li onmouseover= "display (This)" onmouseout= "Hide (This)" &G T Enrollment <ul> <li> Postgraduate Admissions </li> <li> High enrollment </li> <li> High Vocational undergraduate enrollment </li> & Lt;li> Admissions </li> <li> Employment Guidance </li> </ul> </li> <li onmouseover= "Display" (This "Onmouseout=" Hide (this) > Student work <ul> <li> Communist Youth League </li> <li> School online </li> & Lt;li> Student Work Management system </li> <li> Psychological Education Center </li> </ul> </li> <li onmouseover= "Displa Y (This) "onmouseout=" Hide (this) > Information Services <ul> <li> Network Center </li> <li> Network self-service </LI&G T <li> mail system </li> <li> elective system </li> <li> Financial Information </li> <li>vpn: Teacher Special Line </li> ,;li> Logistic repair Service </li> <li> Domestic University information </li> </ul> </li> <li> Book Resources </li> & Lt;li> Alumni Work </li> <li> tender information </li> </ul> </div> </div> </body> </ptml> </td> </tr> </table>
Tip: You can modify some of the code before running
