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

实例代码：

 
<!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. PHP高级教程-文件

    PHP 文件处理 fopen() 函数用于在 PHP 中打开文件. 打开文件 fopen() 函数用于在 PHP 中打开文件. 此函数的第一个参数含有要打开的文件的名称,第二个参数规定了使用哪种模式来 ...

  2. php之快速入门学习-18（PHP 面向对象）

    PHP 面向对象 在面向对象的程序设计(英语:Object-oriented programming,缩写:OOP)中,对象是一个由信息及对信息进行处理的描述所组成的整体,是对现实世界的抽象. 在现实 ...

  3. JDBC五数据源和数据池(web基础学习笔记十一)

    一.为什么使用数据源和连接池 现在开发的应用程序,基本上都是基于数据的,而且是需要频繁的连接数据库的.如果每次操作都连接数据库,然后关闭,这样做性能一定会受限.所以,我们一定要想办法复用数据库的连接. ...

  4. 用BeanUtilsDate类型值为空报错的解决方法

    除BeanUtils外还有一个名为PropertyUtils的工具类,它也提供copyProperties()方法,作用与BeanUtils的同名方法十分相似,主要的区别在于后者提供类型转换功能,即发 ...

  5. NGINX原理 之 SLAB分配机制（转）

    1 引言 众所周知,操作系统使用伙伴系统管理内存,不仅会造成大量的内存碎片,同时处理效率也较低下.SLAB是一种内存管理机制,其拥有较高的处理效率,同时也有效的避免内存碎片的产生,其核心思想是预分配. ...

  6. ibatis 批量更新（一）

      1.4.2.3 批量修改 支持单个动态更新.批量动态更新 <update id="updateCONSULT_SCHEDULEDynamic" parameterClas ...

  7. eclipse Failed to load the JNIshared library

      eclipse Failed to load the JNIshared library CreateTime--2018年4月22日22:08:35 Author:Marydon 1.情景再现 ...

  8. 身份证查询API

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #http://apistore.baidu.com/apiworks/servicedetail/113.h ...

  9. 关于vsftpd的refusing to run with writable root inside chroot()问题

    今天在上班帮测试的同事搭建ftp服务器时出现的一个问题 服务搭建完成后连接时报这个错误: refusing to run with writable root inside chroot() 查了资料 ...

  10. 最快下载速度100Mbps！4G LTE技术全解析

    1导读,关于4G的几个关键概念 [PConline资讯]100Mbps下载速度是什么概念?比3G网速快50倍又是什么概念?比3G通信方式更灵活.通信频谱更宽绰.通信质量更高效.通信费用更便宜是怎样一个 ...