js左侧三 级菜单导航实例代码
发布时间：2020-07-14 01:14:48
标签：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>
0
投稿猜你喜欢
Python 开发学习的意义：（1）学习相关安全工具原理.（2）掌握自定义工具及拓展开发解决实战中无工具或手工麻烦批量化等情况.（3）在二次- 介绍在本文中，你将学习如何使用 Python 构建人脸识别系统。人脸识别比人脸检测更进一步。在人脸检测中，我们只检测人脸在图像中的位置，但在
- 1、算数运算符小例中： a = 5 &nb
- 权重初始化对于训练神经网络至关重要，好的初始化权重可以有效的避免梯度消失等问题的发生。在pytorch的使用过程中有几种权重初始化的方法供大
- 前言复习试题时，发现一道复数问题问题关于 Python 的复数类型，以下选项中描述错误的是A复数的虚数部分通过后缀“J”或者“j”来表示B对
- 本文实例为大家分享了php bootstrap实现简单登录的方法，供大家参考，具体内容如下所有文件 记住是获取name键值对 from 里面
- 昨天正当我用十成一阳指功力戳键盘、昏天暗地coding的时候，正好被人问了一个问题，差点没收好功，洪荒之力侧漏震伤桌边的人，废话不多说，先上
- 本文实例讲述了MySQL单表查询操作。分享给大家供大家参考，具体如下：语法一、单表查询的语法 SELECT 字段1,
- 背景小程序在网络层提供的API是能够完成一个程序与服务端交互的完整链路，但需要大量的定制化代码，才能实现请求拦截和响应拦截，不太符合大多数开
- 什么是序列化与反序列化这里引入微软对序列化的解释：序列化是指将对象转换成字节流，从而存储对象或将对象传输到内存、数据库或文件的过程。 它的主
- 父组件处理：<template> <div class="wrap">
- 随着网站访问量的加大，每次从数据库读取都是以效率作为代价的，很多用ACCESS作数据库的更会深有体会，静态页加在搜索时，也会被优先考虑。互联
- 内容摘要：ASP开发人员为了在他们的设计项目中获得更好的性能和可扩展性而不断努力。幸运地是，有许多书籍和站点在这方面提供了很好的建议。但是这
- 1.Vue父子组件通信方式父子组件通信方式一般为props和emit组合使用，那么在不同的文件中应该如何使用呢？｜.vue文件和.jsx文件
- 本文实例为大家分享了python统计序列中元素的具体代码，供大家参考，具体内容如下问题1： &
- 我们都知道，Numpy 是 Python 环境下的扩展程序库，支持大量的维度数组和矩阵运算；Pandas 也是 Python 环境下的数据操
- 1.类方法类方法是从属于"类对象"的方法。类对象可以通过装饰器@classmethod来定义，具体格式如下：@class
- 目录业务需求：方案一：vuex-persistedstate方案二：vuex-persist总结业务需求：在基于vue开发SPA项目时，为了
- 翻译说明：这是Solid State Group网站上的一篇很友好的文章，解决了我在设计中遇到的很多问题，故在此我翻译其文，并对原作者表示非
- 1.前言(闲话)最近在做电磁炮，发现题目需要用到颜色跟踪，于是花了一点时间学了一下OpenMV，只学习OpenMV是远远不够的，还需要实现与
