导航栏
navi.html
<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>自己做的</title> <link rel="stylesheet" type="text/css" href="navi_css.css"> <script type="text/javascript" src="navi_js.js"></script> </head> <body> <ul> <li onmouseover="show(this)" onmouseout="hide(this)"> <a href="#1">栏目1</a> <ul> <li><a href="#11">栏目1--菜单1</a></li> <li><a href="#12">栏目1--菜单2</a></li> <li><a href="#13">栏目1--菜单3</a></li> <li><a href="#14">栏目1--菜单4</a></li> </ul> </li> <li onmouseover="show(this)" onmouseout="hide(this)"> <a href="#2">栏目2</a> <ul> <li><a href="#21">栏目2--菜单1</a></li> <li><a href="#22">栏目2--菜单2</a></li> <li><a href="#23">栏目2--菜单3</a></li> <li><a href="#23">栏目2--菜单4</a></li> <li><a href="#23">栏目2--菜单5</a></li> </ul> </li> <li onmouseover="show(this)" onmouseout="hide(this)"> <a href="#3">栏目3</a> <ul> <li onmouseover="show(this)" onmouseout="hide(this)"> <a href="#31">栏目3--菜单1</a> <ul> <li><a href="#311">菜单1--子菜单1</a></li> <li><a href="#312">菜单1--子菜单2</a></li> <li><a href="#313">菜单1--子菜单3</a></li> <li><a href="#314">菜单1--子菜单4</a></li> </ul> </li> <li><a href="#32">栏目3--菜单2</a></li> <li onmouseover="show(this)" onmouseout="hide(this)"> <a href="#33">栏目3--菜单3</a> <ul> <li><a href="#331">菜单3--子菜单1</a></li> <li><a href="#332">菜单3--子菜单2</a></li> <li><a href="#333">菜单3--子菜单3</a></li> </ul> </li> </ul> </li> </ul> </body> </html>
navi_css.css
*{ margin: 0; padding: 0; } a{ text-decoration: none; display:block; } a:link, a:visited{ color: black; } a:hover{ color: white; background-color: #4E9EEF; } li ul li a:hover{ background-color: #6b839c; } ul li{ list-style-type: none; float: left; line-height: 40px; text-align:center; font-size: small; width:130px; height:40px; background-color:#C5DBF2; border:solid white; border-width:1px 1px 0 0; } li ul{ display: none; } li ul li ul{ margin-top: -41px; margin-left: 131px; }
navi_js.js
function show(li) { var t = li.getElementsByTagName("ul")[0]; t.style.display = "block"; } function hide(li) { var t = li.getElementsByTagName("ul")[0]; t.style.display = "none"; }
