用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
随机推荐
- Spring事务传播属性
Spring 对事务控制的支持统一在 TransactionDefinition 类中描述,该类有以下几个重要的接口方法: int getPropagationBehavior():事务的传播行为 i ...
- C#中调用user32.dll库的keybd_Event函数，操作键盘
keybd_event()的函数原型是: void keybd_event( byte bVk, //虚拟键码 byte bScan, //该键的硬件扫描码 dword ...
- web前端基础知识 Dom
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
- 【皇甫】☀Spring开题中...
spring (由Rod Johnson创建的一个开源框架)Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spr ...
- 3-PHP全部编码UTF-8
0-html <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> ...
- hadoop的学习
http://www.aboutyun.com/thread-6179-1-1.html
- Node.js Express 框架
Node.js Express 框架 Express 简介 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP ...
- jquery 获取父窗口的元素 父窗口 子窗口
一.获取页面元素 取父窗口的元素方法:$(selector, window.parent.document); 那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent ...
- Intent传递数据的方法
一.传递List 1.传递List<String>的方法 ArrayList<String> info = new ArrayList<String>(); inf ...
- 查询和删除表中重复数据sql语句
1.查询表中重复数据.select * from peoplewhere peopleId in (select peopleId from people group by ...