html css二级导航栏
二级导航栏制作：
1.将一级导航栏去除列表样式（list-style:none），并给予浮动，使其横向排列（float:left）
2.给每个li中添加一个<a></a>标签，给a设置样式,使其成为块级元素( display:block)，这样只需要点击当前 li 范围区域即可触发a的跳转
3.给需要添加二级导航栏的li里面添加 ul>li ,给个类名，设置其样式为（display:none），使其在普通情况下隐藏
4.设置一级导航栏划过效果，当滑到有二级导航栏的 li 时，设置二级导航栏状态为（display:block）,即为显示状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- <link rel="stylesheet" href="./../common/common.css"> -->
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.one{
width: 600px;
background-color: coral;
height: 30px;
margin: 0 auto;
}
.one li{
float: left;
width: 100px;
text-align: center;
line-height: 30px;
}
.one li:hover{
background-color: #fff;
color: coral;
}
.one .two{
display: none;
}
.one li:hover .two{
display: block;
}
.one .two li{
background-color: cadetblue;
} .one .two li:hover{
background-color: honeydew;
}
a{
display: block;
text-decoration: none;
}
</style>
</head>
<body> <ul class="one">
<li><a href="">一级</a> </li>
<li><a href="">一级</a> </li>
<li><a href="">一级</a>
<ul class="two">
<li><a href="">二级</a> </li>
<li><a href="">二级</a> </li>
<li><a href="">二级</a> </li>
</ul>
</li>
<li><a href="">一级</a> </li>
<li><a href="">一级</a> </li>
<li><a href="">一级</a> </li>
</ul> </body>
</html>
html css二级导航栏的更多相关文章
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- JS写的二级导航栏（利用冒泡原理）
今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
- 巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
- 第8天：CSS制作导航栏
今天主要学习了网页导航栏的制作.注意:引入外部CSS样式时,如果使用background:url(../images/1.png),一定记得用..跳出当前文件夹,回到上级目录. 一.导航栏实现步骤: ...
- Css之导航栏学习
Css: ul { list-style-type:none; margin:; padding:; overflow:hidden; background-color:blue; /*固定在顶部*/ ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- HTML/CSS：导航栏水平和垂直
1.垂直导航栏 导航栏 = 链接列表导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的.如需构建垂直导航栏,我们只需要定义 <a> 元素 ...
随机推荐
- tomcat增加内存 JVM内存调优
tomcat总是卡死,查看日志catalina.out 发现疯狂报错 如下,提示内存溢出 java.lang.OutOfMemoryError: Java heap space 此外常见的内存溢出有以 ...
- 面试官:你说你熟悉jvm?那你讲一下并发的可达性分析
这是why技术的第35篇原创文章 上面这张图是我还是北漂的时候,在鼓楼附近的胡同里面拍的. 那天刚刚下完雨,路过这个地方的时候,一瞬间就被这五颜六色的门板和自行车给吸引了,于是拍下了这张图片.看到这张 ...
- 14.git的安装使用
目录 一.版本控制器 二.git 简介 git与svn比较 git的工作流程 版本库间的通信 git分支管理 三.git使用 流程(核心总结) 安装 基础命令 将已有的文件夹 - 初始化为git仓库 ...
- JavaScrip流程控制之switch选择，for循环
swith根据表达式的值来case ,break执行跳转语句 <!DOCTYPE html> <html lang="en"> <head> & ...
- 通配符与标签!important的背景展示，也是让我怀疑人生了
是谁在耳边对我说!important提升权重优先级,只为这一句,我用了3600s研究通配符与标签!important的背景展示,也是让我怀疑人生了!选择器权值:标签选择器1,类选择器和伪类选择器:10 ...
- 在非NDK编译条件下使用Android Log函数
解决的需求 有些时候不能在NDK环境编译,或者使用NDK编译会颇费周折,然后又想使用Android系统自带的Log类方法,那么我们就可以使用dlopen来实现我们的目的.比如在OpenCV中添加And ...
- python选课系统作业
# 选课系统# 角色:学校.学员.课程.讲师# 要求:# 1. 创建北京.上海 2 所学校# 2. 创建linux , python , go 3个课程 , linux\py 在北京开, go 在上海 ...
- 解决mysql导入导出错误问题
1.datetime类型: 当datetime的值为0000-00-00:00:00:00时,mysql是不接受此条数据的,当然可以 insert ignore into table--------- ...
- idea 普通项目 改成 maven项目
首先 pom.xml 是必要的 然后在该文件上右击 add as maven project
- MATLAB应用专题part1-电力电子仿真技术
士不可以不弘毅,任重而道远.仁以为己任,不亦重乎?死而后已,不亦远乎? --曾参 C语言系列需要过一段时间才能更新了.这些天学习C语言我感觉有点崩溃了,所以我先开另外一个专题-matlab应用专题. ...