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

实例代码：

 
<!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. project开发的程序设计与逻辑设计

    非常多时候我们要做庞大project, 就像一棵大树, 方方面面都有自己的细枝末节,而作为开发员的我们,无法时时刻刻去保持对程序的全面认知,所以我们要把程序设计与逻辑设计区分开来. 那么什么是程序设计 ...

  2. 矩阵经典题目四：送给圣诞夜的礼品(使用m个置换实现对序列的转变)

    https://vijos.org/p/1049 给出一个序列,含n个数.然后是m个置换,求对初始序列依次进行k次置换,求最后的序列. 先看一个置换.把置换表示成矩阵的形式.然后将m个置换乘起来.那么 ...

  3. linux下apache的使用

    Linux安装配置apache http://www.cnblogs.com/fly1988happy/archive/2011/12/14/2288064.html 1.获取软件: http://h ...

  4. java指令备忘

    javap  查看class文件用 指令码 助记符 说明 0x00 nop 什么都不做 0x01 aconst_null 将null推送至栈顶 0x02 iconst_m1 将int型-1推送至栈顶 ...

  5. git检查与放弃本地的代码修改情况

    git diff  可以查看当前没有add 的内容修改(不在缓冲区的文件变化) git diff --cached查看已经add但没有commit 的改动(在缓冲区的文件变化) git diff HE ...

  6. SettingsPLSQLDeveloper

      迁移时间:2017年5月21日10:12:23Author:Marydon 一.常用配置项UpdateTime--2017年3月15日13:55:46注:没有安装Oracle数据库的情况下,前两步 ...

  7. 元程序 /如何取test.py中name的值

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #Python学习手册 633 #模块是对象:元程序 #因为模块通过内置属性显示了他们的大多数特性,因此很容易 ...

  8. 深入浅出Java垃圾回收机制（一）（转载）

    转载来做笔记的:原文地址:http://www.importnew.com/1993.html. 对于Java开发人员来说,了解垃圾回收机制(GC)有哪些好处呢?首先可以满足作为一名软件工程师的求知欲 ...

  9. 30、java中递归算法

    1.已知有一个数列f(0)=1,f(1)=4,f(n+2)=2*f(n+1)+f(n),其中n是大于0的正数,求f(10)的值. 分析:设x=n+2 => f(x)=2*f(n-1)+f(n-2 ...

  10. mariadb多实例搭建

    测试环境基于centos7.2,腾讯云实验室,学习搭建! https://www.qcloud.com/developer 多实例mysql,能更加理解mysql安装的基本过程!及简单使用... ma ...