提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

js左侧三级菜单导航实例代码

JS实例代码 菜单 导航 三级 左侧
2023-06-13 09:15:05 时间
效果演示：
 
实例代码：
复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1"/>
<title>demo</title>
<styletype="text/css">
<!--
body{
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
}
#nav,#navul{
list-style:none;
background:#F9F9F9;
font-weight:bold;
padding:0px;
margin:0px;
border:solid1px#CCCCCC;
border-bottom:0px;
width:150px;
text-align:left;
}
#navulul{
border:solid1px#CCCCCC;
border-bottom:0px;
}
#nava{
display:block;
width:150px;
w\idth:140px;
color:#333333;
text-decoration:none;
text-align:center;
border-bottom:solid1px#CCCCCC;
text-align:left;
padding-left:10px;
}
#nava:hover{
color:#336666;
}
#nava.selected{
background:url(http://bbs.blueidea.com/images/common/bb_expand.gif)no-repeatright50%;
}
#navli{
line-height:22px;
position:relative;
}
#navliul{
position:absolute;
left:-999em;
width:150px;
font-weight:normal;
margin:0px;
padding:0px;
}
#navlili{
width:150px;
}
#navliula{
width:150px;
w\idth:126px;
padding:0px12px;
line-height:22px;
text-align:left;
}
#navliulul{
margin:0px00150px;
}
#navli:hoverulul,#navli.sfhoverulul{
left:-999em;
}
#navli:hoverul,#navlili:hoverul,#navli.sfhoverul,#navlili.sfhoverul{
left:auto;
}
#navli:hoverul,#navli.sfhoverul{
left:150px;
top:0px;
}
#navli:hover,#navli.sfhover{
background:#F5E3C0;
}
*html#navli{
float:left;
height:1%;
}
*html#navlia{
height:1%;
}
-->
</style>
</head>
<body>
<p><ahref="javascript:history.back()">Back</a></p>
<ulid="nav">
<li><ahref="">Home</a></li>
<li><ahref="/aboutme.html">AboutMe</a></li>
<li><aclass="selected"href="/tutorials.html">Tutorials</a>
<ul>
<li><ahref="#">SubMenu31</a></li>
<li><aclass="selected"href="#">SubMenu32</a>
<ul>
<li><ahref="#">SubMenu321</a></li>
<li><ahref="#">SubMenu322</a></li>
<li><ahref="#">SubMenu323</a></li>
<li><ahref="#">SubMenu324</a></li>
</ul>
</li>
<li><ahref="#">SubMenu33</a></li>
<li><ahref="#">SubMenu34</a></li>
</ul>
</li>
<li><aclass="selected"href="/gallery/gallery.html">Gallery</a>
<ul>
<li><ahref="#">SubMenu41</a></li>
<li><aclass="selected"href="#">SubMenu42</a>
<ul>
<li><ahref="#">SubMenu421</a></li>
<li><ahref="#">SubMenu422</a></li>
<li><ahref="#">SubMenu423</a></li>
<li><ahref="#">SubMenu424</a></li>
</ul>
</li>
<li><ahref="#">SubMenu43</a></li>
<li><ahref="#">SubMenu44</a></li>
</ul>
</li>
<li><ahref="#">ContactMe</a></li>
</ul>
</body>
</html>

相关文章