navi.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>自己做的</title> 6 <link rel="stylesheet" type="text/css" href="navi_css.css"> 7 <script type="text/javascript" src="navi_js.js"></script> 8 </head> 9 <body> 10 <ul> 11 <li onmouseover="show(this)" onmouseout="hide(this)"> 12 <a href="#1">栏目1</a> 13 <ul> 14 <li><a href="#11">栏目1--菜单1</a></li> 15 <li><a href="#12">栏目1--菜单2</a></li> 16 <li><a href="#13">栏目1--菜单3</a></li> 17 <li><a href="#14">栏目1--菜单4</a></li> 18 </ul> 19 </li> 20 <li onmouseover="show(this)" onmouseout="hide(this)"> 21 <a href="#2">栏目2</a> 22 <ul> 23 <li><a href="#21">栏目2--菜单1</a></li> 24 <li><a href="#22">栏目2--菜单2</a></li> 25 <li><a href="#23">栏目2--菜单3</a></li> 26 <li><a href="#23">栏目2--菜单4</a></li> 27 <li><a href="#23">栏目2--菜单5</a></li> 28 </ul> 29 </li> 30 <li onmouseover="show(this)" onmouseout="hide(this)"> 31 <a href="#3">栏目3</a> 32 <ul> 33 <li onmouseover="show(this)" onmouseout="hide(this)"> 34 <a href="#31">栏目3--菜单1</a> 35 <ul> 36 <li><a href="#311">菜单1--子菜单1</a></li> 37 <li><a href="#312">菜单1--子菜单2</a></li> 38 <li><a href="#313">菜单1--子菜单3</a></li> 39 <li><a href="#314">菜单1--子菜单4</a></li> 40 </ul> 41 </li> 42 <li><a href="#32">栏目3--菜单2</a></li> 43 <li onmouseover="show(this)" onmouseout="hide(this)"> 44 <a href="#33">栏目3--菜单3</a> 45 <ul> 46 <li><a href="#331">菜单3--子菜单1</a></li> 47 <li><a href="#332">菜单3--子菜单2</a></li> 48 <li><a href="#333">菜单3--子菜单3</a></li> 49 </ul> 50 </li> 51 </ul> 52 </li> 53 </ul> 54 </body> 55 </html>
navi_css.css
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 6 a{ 7 text-decoration: none; 8 display:block; 9 } 10 11 a:link, a:visited{ 12 color: black; 13 } 14 15 a:hover{ 16 color: white; 17 background-color: #4E9EEF; 18 } 19 20 li ul li a:hover{ 21 background-color: #6b839c; 22 } 23 24 ul li{ 25 list-style-type: none; 26 float: left; 27 line-height: 40px; 28 text-align:center; 29 font-size: small; 30 width:130px; 31 height:40px; 32 background-color:#C5DBF2; 33 border:solid white; 34 border-width:1px 1px 0 0; 35 } 36 37 li ul{ 38 display: none; 39 } 40 41 li ul li ul{ 42 margin-top: -41px; 43 margin-left: 131px; 44 }
navi_js.js
1 function show(li) { 2 var t = li.getElementsByTagName("ul")[0]; 3 t.style.display = "block"; 4 } 5 6 function hide(li) { 7 var t = li.getElementsByTagName("ul")[0]; 8 t.style.display = "none"; 9 }