用css实现三级导航菜单
主要使用css的hover伪类来实现该功能。
主要思路：先搭出三级菜单的框架，然后使用css的：hover来实现！
对li添加类selected，对该类添加position:relative属性，然后对其二级三级菜单添加position:absolute属性，并设置其top:-1px（因为有1像素的边框）left:-999px；使其在也页面中向左偏移出窗口。
对li设置：hover伪类，当鼠标指针移动到li上时，改变二级三级菜单的left值，这样就可以实现一个简单的三级导航菜单！
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级导航菜单</title>
<style type="text/css">
body{font-size: 12px;} .menu1, .menu1 ul {
list-style: none;
width: 120px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-bottom: 0;
margin: 0;
padding: 0;
text-align: left;
text-indent: 10px;
}
.menu1 a:hover {
color: #336666;
background-color: #F5E3C0;
}
.menu1 a {
display: block;
text-decoration: none;
color: #000;
border-bottom: 1px solid #ccc;
width: 120px;
line-height: 22px;
} .menu1 .active {
position: relative;
}
.menu1 li:hover ul ul {
left: -999px;
}
.menu1 li:hover ul {
left: 120px;
}
.menu1 li li:hover ul {
position: absolute;
left: 120px;
}
.menu1 .active ul {
position: absolute;
top: -1px;
left: -999px;
} </style>
</head>
<body>
<div class="menu">
<ul class="menu1">
<li><a href="###">Home</a></li>
<li><a href="###">About Me</a></li>
<li class="active"><a>Tutorials</a>
<ul>
<li><a href="###">Submenu1</a></li>
<li><a href="###">Submenu2</a></li>
<li class="active"><a href="">Submenu3</a>
<ul>
<li><a href="###">Submenu31</a></li>
<li><a href="###">Submenu32</a></li>
<li><a href="###">Submenu33</a></li>
<li><a href="###">Submenu34</a></li>
<li><a href="###">Submenu35</a></li>
</ul>
</li>
<li><a href="###">Submenu4</a></li>
<li><a href="###">Submenu5</a></li>
</ul>
</li>
<li><a href="###">Gallery</a></li>
<li><a href="###">Contact Me</a></li>
</ul>
</div>
</body>
</html>
用css实现三级导航菜单的更多相关文章
- JS+CSS打造三级折叠菜单，自动收缩其它级 js
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- 纯css实现京东导航菜单
纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...
- css 实现三级联动菜单
昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...
- HTML+CSS代码橙色导航菜单
效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http:/ ...
- 纯css实现二级导航菜单效果,通过简单的鼠标事件操作页面元素样式变换实现二级导航菜单的功能,非常简单实用,
HTML代码如下 <!-- 头部导航栏开始--><div id="nav"><dl class="sy"><dt> ...
- 纯CSS下拉导航菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="h ...
- 简单的CSS 下拉导航菜单实现代码
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
- 利用Html.css OPPO手机导航菜单的制作解析
<body> <div id="top" class="auto"> <div class="nav"> ...
- 38 个免费开源的 CSS 下拉导航菜单
http://www.oschina.net/news/51624/38-open-source-css-dropdown-menus
随机推荐
- 数据库触发器inserted和deleted详解
create trigger updateDeleteTime on user for update as begin update user set UpdateTime=(getdate()) ...
- oracle同一个数据库实例不同的用户之间的表、序列授权操作
1.背景:用户jtuser中有jtproduct中表A,B的同义词,在用户jtuser中向表A,B插入数据,提示“权限不够” 2.将A,B表授权给jtuser用户 $ sqlplus / as sys ...
- Super Jumping! Jumping! Jumping!
Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. May ...
- unity3D5旧动画系统注意事项
最近在写人物控制时因为习惯用旧动画系统所以也没想那么多,就直接在新系统下按照老样子写了,突然发现animation.play不能用了,后来重新声明了变量: public Animation anim; ...
- Android实现文章＋评论（MVP，RxJava，Dagger2，ButterKnife）
简介 这个项目主要有两个功能,一个加载网页/文章,另一个用来显示评论.并应用了MVP模式,Dagger2.RxJava.ButterKnife等开源框架.效果图如下: 结构 首先来看一下布局文件: & ...
- c# 利用动态库DllImport("kernel32")读写ini文件（提供Dmo下载）
c# 利用动态库DllImport("kernel32")读写ini文件 自从读了设计模式,真的会改变一个程序员的习惯.我觉得嘛,经验也可以从一个人的习惯看得出来,看他的代码编写习 ...
- 什么情况下会用到try-catch
本文不区分语言,只为记录一次有收获的面试. 面试官:什么情况下用到try-catch?程序员:代码执行预料不到的情况,我会使用try-catch.面试官:什么是预料不到的情况呢?程序员:比如我要计算a ...
- C# Linq 交集、并集、差集、去重
using System.Linq; List<string> ListA = new List<string>(); List<string> L ...
- JAVA序列化和反序列化
http://developer.51cto.com/art/201202/317181.htm http://blog.csdn.net/earbao/article/details/4691440 ...
- 用于svn添加当前目录下所有未追踪的文件，和删除所有手动删除的文件的脚本
由于要经常用到类似与 git 中的 git add --all 这种操作,但是发现svn中并不支持类似的操作. 虽然可以使用 wildcard 进行匹配,但是 wildcard是在shell中进行匹配 ...