JavaScript多级下拉菜单代码(简单实用)

</p> <p><title>JavaScript<a href="https://kunjuke.com/tag/318/" title="下拉菜单" target="_blank">下拉菜单</a></title> </p> <p>* {<br /> padding:0;<br /> margin:0;<br /> }<br /> body {<br /> font-family:verdana, sans-serif;<br /> font-size:small;<br /> }<br /> #navigation, #navigation li ul {<br /> list-style-type:none;<br /> }<br /> #navigation {<br /> margin:20px;<br /> }<br /> #navigation li {<br /> float:left;<br /> text-align:center;<br /> position:relative;<br /> }<br /> #navigation li a:link, #navigation li a:visited {<br /> display:block;<br /> text-decoration:none;<br /> color:#000;<br /> width:120px;<br /> height:40px;<br /> line-height:40px;<br /> border:1px solid #fff;<br /> border-width:1px 1px 0 0;<br /> background:#c5dbf2;<br /> padding-left:10px;<br /> }<br /> #navigation li a:hover {<br /> color:#fff;<br /> background:#2687eb;<br /> }<br /> #navigation li ul li a:hover {<br /> color:#fff;<br /> background:#6b839c;<br /> }<br /> #navigation li ul {<br /> display:none;<br /> position:absolute;<br /> top:40px;<br /> left:0;<br /> margin-top:1px;<br /> width:120px;<br /> }<br /> #navigation li ul li ul {<br /> display:none;<br /> position:absolute;<br /> top:0px;<br /> left:130px;<br /> margin-top:0;<br /> margin-left:1px;<br /> width:120px;<br /> } </p> <ul id="navigation"> <li> 栏目1 </p> <ul> <li>栏目1->菜单1</li> <li>栏目1->菜单2</li> <li>栏目1->菜单3</li> <li>栏目1->菜单4</li> </ul> </li> <li> 栏目2 </p> <ul> <li>栏目2->菜单1</li> <li>栏目2->菜单2</li> <li>栏目2->菜单3</li> <li>栏目2->菜单4</li> <li>栏目2->菜单5</li> </ul> </li> <li> 栏目3 </p> <ul> <li> 栏目3->菜单1 </p> <ul> <li>菜单1->子菜单1</li> <li>菜单1->子菜单2</li> <li>菜单1->子菜单3</li> <li>菜单1->子菜单4</li> </ul> </li> <li>栏目3->菜单2</li> <li> 栏目3->菜单3 </p> <ul> <li>菜单3->子菜单1</li> <li>菜单3->子菜单2</li> <li>菜单3->子菜单3</li> </ul> </li> </ul> </li> </ul> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• JS实多级联动下拉菜单类，简单实现省市区联动菜单！
• js左侧多级菜单动态的解决方案
• JS简单实现多级Select联动菜单效果代码
• JS+CSS实现的简单折叠展开多级菜单效果
• javascript实现在下拉列表中显示多级树形菜单的方法
• JS多级连动菜单
• js实现网页多级级联菜单代码
• JS模拟的QQ面板上的多级可展开的菜单
• js模拟淘宝网的多级选择菜单实现方法
• 基于JavaScript实现多级菜单效果