在左侧三级菜单导航想必大家都见到过吧，它的实现过程也并不复杂，下面有个不错的示例，感兴趣的朋友可以了解下

实例代码：

 
<!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>左侧三级菜单导航-www.jbxue.com</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://www.jbxue.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>

js左侧三级菜单导航实例代码的更多相关文章

  1. js左侧三级菜单导航代码

    效果演示: 实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  2. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  3. JS判断不能为空实例代码

    JS判断不能为空实例代码.分享在此. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " ...

  4. js的dom测试及实例代码

    js的dom测试及实例代码 一.总结 一句话总结: 1.需要记得 创建 标签和创建文本节点都是document的活:document.createTextNode("Rockets的姚明&q ...

  5. 【转】纯JS省市区三级联动（行政区划代码更新至2015-9-30）

    本文代码实现的功能是省市区三级联动下拉列表,纯Javascript,网上已有很多这方面的代码.但是作为一个新手,这是我的第一篇CSDN博客,发此文的目的主要是学习交流,希望看到的朋友发现有什么不对的地 ...

  6. js设计模式之实现观察者模式实例代码

    前端界面 html代码 <body> <select name="" id="select"> <option value=&qu ...

  7. js鼠标、键盘事件实例代码

    1. 鼠标的哪个按键被点击? <html> <head> <script type="text/javascript"> function wh ...

  8. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  9. JS 下拉菜单

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

随机推荐

  1. uni-app 为何package.json配置以后不会生成文件?

    和微信小程序不同的是uni-app 配置步骤如下 小程序是新建json生成文件夹\文件 uni-app是新建文件生成json

  2. Linux安装 微信开发者工具(deepin linux ubt)

    一.环境:: deepin linux15.4.1 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版 ...

  3. JavaSE入门学习17：Java面向对象之package(包)

           一Java包(package)        为了更好地组织类,Java提供了包机制,用于差别类名的命名空间.        包的作用:        A把功能类似或相关的类或接口组织在 ...

  4. Openerp 7 view画面编辑/创建/删除/复制功能控制

    OpenERP 7.0中,Tree或Form画面上可以添加属性create edit delete,用于控制Create.Delete.Edit.Duplicate功能是否显现.如下例:<for ...

  5. SettingsEditplus

      迁移时间:2017年5月20日10:51:51Author:Marydon官网下载 http://www.editplus.com/设置一 1.修改字体大小及背景色 首选项-->Genera ...

  6. Linux下安装load generator步骤及问题解决

    Linux下安装load generator步骤及问题解决 上一篇 / 下一篇  2014-08-06 18:33:00 / 个人分类:loadrunner相关 查看( 146 ) / 评论( 0 ) ...

  7. linux脚本加密shc

    linxu的shell脚本看下源码,都能明白含义.加密也是很关键的 01.安装shc加密 http://www.datsi.fi.upm.es/~frosal/sources/   ###下载源码 百 ...

  8. C-常用字符串操作函数详解

    //使用字符串操作应时刻注意字符串或者数组长度!!避免溢出!! 1. size_t strlen(char const *str); //计算字符串长度, 注意返回size_t类型的值, 即unsig ...

  9. 【转载】加密Spring加载的Properties文件

    目标:要加密spring的jdbc配置文件的密码口令. 实现思路:重写加载器的方法,做到偷梁换柱,在真正使用配置之前完成解密. 1.扩展 package com.rail.comm; import j ...

  10. HDUOJ ----1709

    The Balance Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...