Tip: you can modify some code before running
Js compliance with web standards Level 2 drop-down menu<!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><title>Js compliance with web standards Level 2 drop-down menu</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/css">* {Padding: 0; margin: 0;} body {font-family: verdana, sans-serif; font-size: small;} # navigation, # navigation li ul {list-style-type: none;} # navigation {margin: 40px;}/* can have no attribute, is the distance between content and edge */# navigation li {float: left; text-align: center; position: relative;/* position: relative must be written, is the link below relative to it absolute positioning */} # navigation li a: link, # navigation li a: visited {display: block; text-decoration: none; color: #000; width: 120px;/* change the length of all navigation bars */height: 30px;/* change the height of all navigation bars */line-height: 30px; border: 1px solid red; /* the colors of all navigation bars without this attribute are even Together */background: # c5dbf2; padding-left: 10px ;}# navigation li ul {display: none; position: absolut; top: 40px; left: 0; margin-top: 1px;/* dispensable. If not, there will be no gaps between the main menu and the secondary menu */width: 120px ;} # h {position: absolute; top: 74px; left: 40px ;}</style><script type="text/javascript">Function displaySubMenu (li) {var subMenu = li. getElementsByTagName ("ul") [0]; subMenu. style. display = "block";} function hideSubMenu (li) {var subMenu = li. getElementsByTagName ("ul") [0]; subMenu. style. display = "none ";}</script></head><body><!--把下面代码加到<body>与</body>之间--><div> <ul id="navigation"> <li onmouseover="displaySubMenu(li1)" onmouseout="hideSubMenu(this)" id="li1">Topic 1<!--函数里面用id和this都代表了这个节点的意思--> <ul> <li>Topic 1-> Menu 1</li> <li>Topic 1-> Menu 2</li> <li>Topic 1-> menu 3</li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">Topic 2<ul> <li>Topic 2-> Menu 1</li> <li>Topic 2-> Menu 2</li> <li>Topic 2-> menu 3</li> </ul> </li> <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">Topic 3<ul> <li>Topic 3-> Menu 1</li> <li>Topic 3-> Menu 2</li> <li>Topic 3-> menu 3</li> </ul> </li> </ul></div></body></html>
Tip: you can modify some code before running
