用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
随机推荐
- 3个著名加密算法(MD5、RSA、DES)的解析
MD5的全称是Message-Digest Algorithm 5,在90年代初由MIT的计算机科学实验室和RSA Data Security Inc发明,经MD2.MD3和MD4发展而来. M ...
- 关于git自己所学到的东西
1.什么是Git(傻瓜内容跟踪器) Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目 Git 是 Linus Torvalds (Linus在1991年创建了 ...
- 添加群组表AppGroup和群组详细表AppGroupDetails
添加群组表AppGroup和群组详细表AppGroupDetails CREATE TABLE [dbo].[AppGroup]( ) NOT NULL PRIMARY KEY, ) NOT NULL ...
- 夺命雷公狗-----React_native---1---jdk的安装
目录结构如下 然后打开安装包 这样大致上都算是完成了,那么我们要在cmd窗口里面对她进行测试下... 比如用命令看下版本 java -version 然后开始配置环境变量: 然后创建一个"J ...
- LAMP环境搭建
安装前说明: 先安装gcc gcc-c++ make 等 可用yum install -y gcc gcc-c++ make 也可以使用rpm安装不过需要注意依赖 1.安装apache 下载链接:ht ...
- js和jq添加新表格
javascript动态实现表格: function createTable(rowCount,cellCount){ var table = document.createElement('tabl ...
- php 读取json数据文本所遇到的问题
json数据属于特殊的字符串,一般自己写的json数据不要误加空格,回车,换行, 若是从其他文件读取过来的json数据很有可能带有空格,回车,换行等符号,导致使用json_decode()转诚数组失败 ...
- c#的逻辑运算符重载（二）
重载==以后,则==失去原有意义,这时可以使用object.equals(对象A,对象B)的方式进行判断,同样可以达到==的效果
- 电脑安装Android4.0虚拟机的做法
在开始教程之前,先给大家展示一下成功运行Android 4.0虚拟机的界面,经过笔者测试,体验很流畅,喜欢DIY和对开发感兴趣的朋友们可以猛击下一页,继续浏览教程. 准备工作 在体验前我们首先要下载J ...
- PostgreSQL入门
这篇文章主要介绍我在最近工作中接触到的数据库PostgreSQL,做个入门记录,以便自己日后回顾. 1.下载安装,安装配置过程可以参考http://blog.chinaunix.net/uid-354 ...