CSS实现三级菜单[转]
头部导航条布局
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>头部导航条制作</title>
<link rel="stylesheet" type="text/css" href="css/master8.css">
</head>
<body>
<div class="navbox">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">web前端</a></li>
<li><a href="#">前端新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
用无序列表制作头部导航条：
无序列表是上下布局排列的，那我们需要思考的是让他左右布局的方式排列
左右排列的方式我们所用的是
float:left;浮动的方法让li左右布局CSS样式：
.navbox{
width: 960px;
height: 40px;
margin: 20px auto;
background: #08c;
}
.navbox >ul>li{
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
}鼠标移入时实现颜色的变换
HTML代码：
<div class="navbox">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">web前端</a></li>
<li><a href="#">前端新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>思路：
鼠标移入时每个<li>显示为另一种颜色background: #00bfff;
css代码：.navbox ul li a{
display: block;
color: #fff;
background: #08c;
}
.navbox ul li a:hover{
text-decoration: none;
background: #00bfff;
}下拉菜单实现
html：
<div class="navbox">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">web前端</a>
<ul class="subnav">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">前端新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>思路：
在一级菜单web前端下实现二级菜单<ul class="subnav">html
css
JavaScript
当鼠标移入菜单时web前端时显示二级菜单，移出时隐藏；
CSS代码实现：
.subnav{
display: none;
}
/*鼠标没有移入“web前端”选项栏时二级菜单隐藏*/
.navbox ul li:hover .subnav{
display: block;
}
/*当鼠标移入“web前端”选项栏时显示二级菜单*/三级菜单实现
<div class="navbox">
<ul class="clearfix">
<li><a href="#">首页</a></li>
<li><a href="#">资讯</a></li>
<li><a href="#">web前端</a>
<ul class="subnav">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul class="threenav">
<li><a href="#">css1</a></li>
<li><a href="#">css2</a></li>
<li><a href="#">css3</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">前端新闻</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>思路：
前面与二级菜单思路相似唯一不同的是三级菜单显示的位置。我们看看css的绝对定位与相对定位这篇文章
CSS代码：
.subnav>li{
position: relative;
}
.threenav{
position: absolute;
top: 0;
left: 160px;
width: 160px;
}
.subnav, .threenav{
display: none;
}
.subnav li:hover .threenav{
display: block;
}- 最后实现的效果如下图：
CSS实现三级菜单[转]的更多相关文章
- 纯css制作三级菜单
<!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- 用css实现三级导航菜单
主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后 ...
- CSS打造三级下拉菜单
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
- JS+CSS打造三级折叠菜单，自动收缩其它级 js
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- HTML+CSS实现简单三级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css 实现三级联动菜单
昨天因为项目中想要把二级联动菜单改成三级联动菜单,所以我就单独写了一个tab导航栏,用纯css的方式实现的三级联动.一开始我想着可以用js实现,但是js的hover事件和mouseenter,mous ...
- js左侧三级菜单导航实例代码
在左侧三级菜单导航想必大家都见到过吧,它的实现过程也并不复杂,下面有个不错的示例,感兴趣的朋友可以了解下 实例代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换
前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...
随机推荐
- LeetCode--045--跳跃游戏II(java)
给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 你的目标是使用最少的跳跃次数到达数组的最后一个位置. 示例: 输入: [2,3,1,1,4] 输 ...
- myeclipce注册
今天提示MyEclipse Trial Expired,如何手动获取MyEclipse 注册码! 1.建立JAVA Project,随便命名,只要符合规则就行. 2.在刚刚建好的Project右击sr ...
- 【HDOJ6666】Quailty and CCPC（模拟）
题意:给出罚时现场赛的题数和罚时,问是否有在金牌线下取整被卡出,四舍五入卡入的队伍 n<=1e5 思路: #include<bits/stdc++.h> using namespac ...
- 【HDOJ6621】K-th Closest Distance（主席树，二分）
题意:给定一个长为n的序列,有m次强制在线的询问,每次询问位置[L,R]中abs(a[i]-p)第k小的值 n,m<=1e5,a[i]<=1e6,p<=1e6,k<=169 思 ...
- 20180716-Java正则表达式
import java.util.regex.Matcher;import java.util.regex.Pattern; public class RegexMatches{ public sta ...
- properties与yml之间的比较
在Spring Cloud的配置文件中,发现使用yml与properties两种后缀的文件: 在application.properties中内容是这样的: server.port=8801eurek ...
- Unity 中使用预编译指令区分平台
在实际项目开发过程中,我们经常会根据平台来写一些逻辑 #if UNITY_EDITOR #elif UNITY_IPHONE #elif UNITY_ANDROID #endif 使用预编译指令能很好 ...
- spring boot中@ControllerAdvice的用法
@ControllerAdvice ,这是一个增强的 Controller.使用这个 Controller ,可以实现三个方面的功能: 全局异常处理 全局数据绑定 全局数据预处理 灵活使用这三个功能, ...
- JavaBean属性和成员变量的区别和联系
JavaBeans是Java中一种特殊的类,可以将多个对象封装到一个对象(bean)中.特点是可序列化,提供无参构造器,提供getter方法和setter方法访问对象的属性.名称中的“Bean”是用于 ...
- jacoco + ant远程统计（tomcat/spring boot）服务的代码覆盖率
什么是Jacoco? Jacoco(java code coverage)是一个开源的Java代码覆盖率工具,Jacoco可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件, ...