用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
随机推荐
- mongodb群集
项目目标:故障自动切换和自动修复成员节点,各个数据库之间数据完全一致.项目描述:副本集没有固定主节点,是整个集群选举得出的一个主节点,当其不工作时变 更其他节点.最小的副本集也应该具备一个pri ...
- html特殊字符
平时写代码很少用到HTML的特殊字符,最常用的可能是 了,但有时在移动端为了节省时间,可能会用这些字符实现某种特殊效果,现整理如下: 使用方法: 这些字符属于unicode字符集,所以,你的文档需要声 ...
- size_t 类型
1 关于size_t定义 size_t是一种数据相关的无符号类型,它被设计得足够大以便能够内存中任意对象的大小.在cstddef头文件中定义了size_t类型,这个文件是C标准库stddef.h头文件 ...
- C#中一些常用的正则表达式
需要引用using System.Text.RegularExpressions; Regex r = new Regex("^\\s*([A-Za-z0-9_-]+(\\.\\w+)*@( ...
- php 无限极
1,递归 public function getInfo(){ $data=$this->select(); $arr=$this->noLimit($data,$f_id=0,$le ...
- __PUBLIC__ 路径更改
config.php 'TMPL_PARSE_STRING' => array( '__PUBLIC__' => __ROOT__ . '/' . APP_NAME . '/Tpl/Pub ...
- sqlserver中DATE类型的数据转化 CONVERT
主要描述的是SQL Server使用convert取得datetime日期数据的实际操作流程,在实际操作中用SQL Server数据库中用convert来获取datetime日期数据,以下实例包含各种 ...
- cento下安装elasticsearch2.4.2小记
1.首先需要安装好java,并配置好环境变量 2.下载elasticsearch的rpm包,命令如下: wget https://download.elastic.co/elasticsearch/r ...
- CSS颜色代码
颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...
- Xubuntu VNC Xfce4
sudo mousepad ~/.vnc/xstartup #!/bin/sh # Uncomment the following two lines for normal desktop: unse ...