js左侧三级菜单导航代码
效果演示：
实例代码：
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>demo</title>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
#nav, #nav ul {
list-style: none;
background: #F9F9F9;
font-weight: bold;
padding: 0px;
margin: 0px;
border: solid 1px #CCCCCC;
border-bottom: 0px;
width: 150px;
text-align: left;
}
#nav ul ul{
border: solid 1px #CCCCCC;
border-bottom: 0px;
}
#nav a {
display: block;
width: 150px;
w\idth: 140px;
color: #333333;
text-decoration: none;
text-align: center;
border-bottom: solid 1px #CCCCCC;
text-align: left;
padding-left: 10px;
}
#nav a:hover{
color: #336666;
}
#nav a.selected{
background: url(http://bbs.blueidea.com/images/common/bb_expand.gif) no-repeat right 50%;
}
#nav li {
line-height: 22px;
position: relative;
}
#nav li ul {
position: absolute;
left: -999em;
width: 150px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
#nav li li {
width: 150px;
}
#nav li ul a {
width: 150px;
w\idth: 126px;
padding: 0px 12px;
line-height: 22px;
text-align: left;
}
#nav li ul ul {
margin: 0px 0 0 150px;
}
#nav li:hover ul ul,#nav li.sfhover ul ul{
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{
left: auto;
}
#nav li:hover ul,#nav li.sfhover ul{
left: 150px;
top: 0px;
}
#nav li:hover, #nav li.sfhover {
background: #F5E3C0;
}
* html #nav li {
float: left;
height: 1%;
}
* html #nav li a {
height: 1%;
}
-->
</style>
</head>
<body>
<p><a href="javascript:history.back()">Back</a></p>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="/aboutme.html">About Me</a></li>
<li><a class="selected" href="/tutorials.html">Tutorials</a>
<ul>
<li><a href="#">Sub Menu 31</a></li>
<li><a class="selected" href="#">Sub Menu 32</a>
<ul>
<li><a href="#">Sub Menu 321</a></li>
<li><a href="#">Sub Menu 322</a></li>
<li><a href="#">Sub Menu 323</a></li>
<li><a href="#">Sub Menu 324</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 33</a></li>
<li><a href="#">Sub Menu 34</a></li>
</ul>
</li>
<li><a class="selected" href="/gallery/gallery.html">Gallery</a>
<ul>
<li><a href="#">Sub Menu 41</a></li>
<li><a class="selected" href="#">Sub Menu 42</a>
<ul>
<li><a href="#">Sub Menu 421</a></li>
<li><a href="#">Sub Menu 422</a></li>
<li><a href="#">Sub Menu 423</a></li>
<li><a href="#">Sub Menu 424</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 43</a></li>
<li><a href="#">Sub Menu 44</a></li>
</ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</body>
</html>
转载于:https://www.cnblogs.com/james1207/p/3318119.html
js左侧三级菜单导航代码相关推荐
- CSS+JS灰色树型菜单导航代码
代码简介: CSS+JS打造的树型菜单,没有怎么美化,颜色看上去也不很美,提供一种思路,真想用的朋友好好修改一下颜色,里面都有注释,相信通过你的努力,它最终的效果一定很漂亮. 代码内容: <!D ...
- vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码?
郎朗坤 废话不多说了,直接给大家贴代码了,完整代码: vue点击切换显示隐藏 {{item.name}} {{subItem.name}} 以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐 ...
- html前端元素—菜单导航代码实例
今天分享下"html前端元素-菜单导航代码实例"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一 ...
- layui自定义ajax左侧三级菜单
HTML代码: 需引入layui.css代码 <!-- 左侧的菜单 --> <div class="layui-side layui-bg-black" id=& ...
- 10款菜单导航代码_jquery 导航菜单_js 导航菜单_二级导航条下拉菜单（一）
jQuery左侧下拉导航菜单后台框架模板 js侧边隐藏菜单收缩特效 黑色的左侧导航管理面板ui特效 企业官网tab下拉菜单特效 Facebook自定义多级导航菜单查询 jQuery圆形转盘多级菜单代码 ...
- layui左侧三级菜单2.0
之前在layui 1.0的时候写过一个三级菜单,那时候用三级菜单还要自己扩展,与后台交互也显得麻烦,现在新版本的layui自动就可以实现三级菜单了,很多朋友在问,我就帮大家整理了一下样式大家可以改改, ...
- vue 左侧菜单隐藏_vue.js 左侧二级菜单显示与隐藏切换的实例代码
vue点击切换显示隐藏 *{ padding: 0; margin: 0; font-size: 14px; } ul{ width: 200px; height: auto; } h2{ backg ...
- java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
- 分享111个JS菜单导航，总有一款适合您
分享111个JS菜单导航,总有一款适合您 111个JS菜单导航下载链接:https://pan.baidu.com/s/1WkrSIyHC5JySwrCTL0sgLA?pwd=13yx 提取码:13 ...
最新文章
- Kafka核心设计与实践原理总结：进阶篇
- html5 呼吸灯效果,jQuery仿地铁线路指示灯效果
- 【Android 逆向】Android 逆向通用工具开发 ( 网络模块开发 | SOCKET 网络套接字初始化 | 读取远程端 “Android 模拟器“ 信息 | 向远程端写出数据 )
- 【线性规划和网络流24题】
- 微信开发(02)之处理微信客户端发来的消息
- svn 没有绿色小勾
- 分享一些支持多租户的开源框架
- “找不到网络路径”的检测方法及解决方案
- bzoj千题计划141：bzoj3532: [Sdoi2014]Lis
- java/android 做题中整理的碎片小贴士(15)
- Google 加入反 IE6 联盟：IE6 真的能被消灭吗？
- 高中信息技术——Photoshop刷题点整理
- HighCharts：PlotLine的label文字不显示
- CSS综合征病例,ChurgStrauss 综合征 (css) 变应性嗜酸性肉芽肿课件
- 文件编程概念（C语言库函数系统调用API）
- div嵌套的div水平垂直居中
- Java注解：@IntDef 替换 Emum
- 商业变现永不眠(一) — 什么是决定商业化路径的底层逻辑？
- android7.1 打印机 (ghostscript+hpijs - hplip)
- 基于 Eclipse+Java Swing + Mysql 学生选课管理系统
热门文章
- 2014 Super Training #8 C An Easy Game --DP
- AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
- mysql clob blob,如何在MySQL中插入BLOB和CLOB文件？
- 大学计算机课程改革项目,大学计算机课程改革.ppt
- PHP如何把三张图片均匀分布,怎么把一张图片分成9张
- python做定时任务的方式及优缺点_python BlockingScheduler定时任务及其他方式的实现...
- jquery ajax统一对url编码,jQuery AJAX请求中的相对与绝对URL
- 华为机考HJ1字符串最后一个单词的长度
- mysql数据库建仓范式_存mysql个数
- 使用Python,OpenCV在视频中进行实时条形码检测