用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
随机推荐
- maven编译报错 -source 1.5 中不支持 lambda 表达式
在用maven编译项目是由于项目中用了jdk 1.8, 编译是报错 -source 1.5 中不支持 lambda 表达式,Google找到这篇解决方案,记录一下: 编译时报如下错误: [ERROR ...
- http缓存之304 last-modified，cache-control:max-age，Etag等
因最近客户端慢的问题,系统分析了下http协议缓存问题.本文主要记录总结http缓存相关知识. 1. 讨论涉及的要点 访问返回类 > 访问返回200 OK > 访问返回200 (from ...
- ubuntu安装使用GitHub--PC端
按照这个步骤安装并且初步使用 按照这个程序配置git的ssh,在git push时不用输入密码
- CSS深入理解之margin
前言 改变容器尺寸 margin改变容器尺寸有以下两个限制条件: 使用于没有设置宽高的普通block元素float/absolute/fixed元素 以及 inlines水平 table- ...
- C/C++ 结构体 数组 简单输入输出
#include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; int ma ...
- aspcms，2.x以上版本，保护栏目不可删除处理方法
aspcms,2.x以上版本,保护栏目不可删除处理方法.首先找到\admin\_content\_Sort\AspCms_SortFun.asp这个文件.然后将if isnul(id) then a ...
- 自适应网页设计（Responsive Web Design）
引用:http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html 随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面 ...
- 使用SQL语句查询日期(当月天数,当月第一天,当月最后一天,本年最后一天,当月第一个星期) 日期转字符串
取某月天数:,) --当月天数 ,DATEADD(m, DATEDIFF(m,,getdate())+,))) ---当月第一天 ,getdate()) ---当月最后一天 ,dateadd(m,,d ...
- 一周试用yii开发一个带各种该有功能的web程序（三）
接上篇,为什么index 模版里没有任何有关require,inculde类型关键字,却任然有我们认为“多余”的字符出现.因为在至少我的认知里html的结构该是<html><head ...
- python之haproxy配置文件操作（第三天）
作业: 对haproxy配置文件进行操作 要求: 对haproxy配置文件中backend下的server实现增删改查的功能 一.这个程序有二个版本 1. python2.7版本见haproxy_py ...