个人练习：使用HTML+CSS制作二级菜单
最近一直在学习HTML+CSS，刚看完如果制作下拉菜单部分，就想着做一个练练手。
先上成品图：
就是上面这个效果，横向菜单选项能点击，鼠标放在上面也能展开二级菜单，二级菜单也能点击，点击后就会在底下的<iframe>中打开网站链接。（可能这里会有人好奇"为什么不点开哔哩哔哩你不是都放在上面了嘛！"，实际上我这边点开哔哩哔哩它会跳转两次，先在<iframe>中打开一次，然后又会在当前页面转到哔哩哔哩，你得后退一次才能看到在<iframe>中打开的哔哩哔哩_(:з」∠)_）
那么不废话了直接切入正题。
我的设想是创建两个<div>，宽度都是占100%，顶上的<div>放菜单栏，下面的<div>专门放<iframe>（这里先给两个区域设置背景颜色好分辨）：
<!-- 顶部div区域，存放横向导航栏 -->
<div class="topMenu"> </div> <!-- 主要内容的div区域，存放网站页面的框架 -->
<div class="mainContent"> </div>
HTML部分
底端的<div>区域我希望高度是除去顶端元素后剩余的所有部分，这里就用到了CSS3中的一个函数calc()。：
/* 清除文档内外边距，让<div>区域能够紧贴浏览器边缘 */
body {
padding:0px;
margin:0px;
} /* 设置顶部<div>区域样式 */
.topMenu {
z-index:; /* 设置元素堆叠顺序，保证菜单能出现在最前端 */ width:100%; /* 设置宽度 */
height:50px; /* 设置指定高度。如果想要增加顶部横向导航栏的高度设置这个 */
background-color:#000000; /* 设置背景颜色，让没有列表项的位置也有颜色，看起来不违和 */
}
/* 设置底部<div>区域样式 */
.mainContent {
position:absolute; /* 这个定位是为了让这个<div>区域固定在页面底端 */
bottom:0px; /* 让它定位在底端 */
overflow:hidden; /* 溢出部分隐藏，防止出现第二个滚动条 */
z-index:-1; /* 设置元素堆叠顺序为最底层，为了不让它遮住下拉菜单的垂直列表项 */ width:100%; /* 设置宽度 */
/* 因为不是所有浏览器都支持CSS3中的calc()方法，所以这里写了三条去设置高度 */
height:-webkit-calc(100% - 50px);
height:-moz-calc(100% - 50px);
height:calc(100% - 50px);
background-color:#CDCDCD; /* 这个背景颜色是测试用的，想删除可以删除 */
}
CSS部分
这个时候我们的两个区域就创建好啦：
接下来我们将列表项和底部用的<iframe>框架写进去，在<head>中添加<base>标签指示点击的链接都在框架中打开：
<head>
<meta charset="UTF-8">
<title>使用HTML+CSS制作二级菜单</title>
<!-- 链接到外部样式表 -->
<link rel="stylesheet" type="text/css" href="使用HTML+CSS制作二级菜单.css" />
<!-- 设置所有超链接单击的时候的打开方式为在框架"isFrame"中打开 -->
<base target="isFrame" />
</head> <body>
<!-- 顶部div区域，存放横向导航栏 -->
<div class="topMenu">
<!-- 一级菜单 -->
<ul>
<!-- 二级菜单:菜鸟教程 -->
<li class="dropdown">
<a href="http://www.runoob.com/">
菜鸟教程
</a>
<ul class="dropdown-content">
<li>
<a href="http://www.runoob.com/html/html-tutorial.html">HTML教程</a>
</li>
<li>
<a href="http://www.runoob.com/css/css-tutorial.html">CSS教程</a>
</li>
<li>
<a href="http://www.runoob.com/html/html5-intro.html">HTML5教程</a>
</li>
<li>
<a href="http://www.runoob.com/css3/css3-tutorial.html">CSS3教程</a>
</li>
</ul>
</li>
<!-- 二级菜单:indienova -->
<li class="dropdown">
<a href="https://indienova.com/">
indienova
</a>
<ul class="dropdown-content">
<li>
<a href="https://indienova.com/indie-game-news/">文章</a>
</li>
<li>
<a href="https://indienova.com/column/">专题</a>
</li>
<li>
<a href="https://indienova.com/indie-game-development/">开发</a>
</li>
<li>
<a href="https://indienova.com/usergames">游戏</a>
</li>
</ul>
</li>
<!-- 二级菜单:哔哩哔哩动画 -->
<li class="dropdown">
<a href="https://www.bilibili.com/">
哔哩哔哩动画
</a>
<ul class="dropdown-content">
<li>
<a href="https://www.bilibili.com/v/douga/?spm_id_from=333.334.b_7072696d6172795f6d656e75.2">动画</a>
</li>
<li>
<a href="https://www.bilibili.com/anime/?spm_id_from=333.334.b_7072696d6172795f6d656e75.7">番剧</a>
</li>
</ul>
</li>
<!-- 右浮动的一级菜单选项:百度 -->
<li id="baiDu">
<a href="https://www.baidu.com/">
百度
</a>
</li>
</ul>
</div> <!-- 主要内容的div区域，存放网站页面的框架 -->
<div class="mainContent">
<!-- 显示在菜单中点击的链接用的框架 -->
<iframe name="isFrame"></iframe>
</div> </body>
HTML部分
这个时候效果是这样的：
这里因为<ul>的外边距（margin）的关系页面顶端被顶出了一段空间，左侧被内边距（padding）顶出了一段空间，只需要将这两个属性设置为0px即可。还需要去除无序列表的标示（list-style-type:none），顺便设置一下框架的样式：
/* 设置显示网站页面框架的属性，因为只有一个框架我就直接设置<iframe>的属性 */
iframe {
width:100%;
height:100%;
border:none; /* 去除它自带的边框 */
} /* 设置顶部<div>区域中的<ul>样式 */
.topMenu ul{
margin:0px; /* 去除外边距，使其能够紧贴<div>边缘 */
padding:0px; /* 去除内边距，使其能够紧贴<div>边缘 */
list-style-type:none; /* 去除无序列表的标识符 */
}
CSS部分
将最外层的列表中的列表项<li>设置成横向：
/* 设置header区域中的水平列表的<li>标签的样式 */
li {
float:left; /* 设置左浮动，让它列表项的方向变成水平方向 */
background-color:#000000; /* 设置背景颜色 */
text-align:center; /* 设置水平对齐方式为居中 */
width:150px; /* 设置固定宽度 */
border-right:solid 2px #FFFFFF; /* 设置右边框作为分割标签的标志 */
}
CSS部分
设置一下<a>标签的样式，修改字体颜色（color）和去除下划线（text-decoration），让它的高度（height）和我们设置的顶端<div>的高度一致，为了让它的点击区域能够充满<li>标签，我们将其转换为块级元素（display:block）：
/* 设置header区域中的<a>标签的初始样式 */
a {
display:block; /* 转换为块级元素，为了让点击范围能够扩充到整个<li>区域 */
line-height:50px; /* 设置内边距让文字垂直居中。 */
color:#FFFFFF; /* 修改文字初始颜色 */
text-decoration:none; /* 去除<a>标签的下划线 */
}
CSS部分
已经可以看出样子了。
接下来我们把二级菜单隐藏起来（display:none）。在之前写这个菜单列表的时候我已经给每一个二级菜单的<ul>都增加了一个类（class:dropdown-content），那么我们CSS的样式部分直接对这个类的所有<ul>标签进行设置就行啦：
/* 隐藏所有二级菜单 */
ul.dropdown-content {
display:none; /* 设置显示属性为none */
}
CSS部分
二级菜单就都不见了，那我们该怎么看见二级菜单勒？我们可以设置当鼠标悬停在有二级菜单的选项上的时候（:hover）将显示属性设置为块（display:block）或者是它最初的属性列表（display:list-item）都行，在这个例子中我选择了列表（display:list-item）。在前面我也给每个包含二级菜单的<li>标签都增加了一个类（class:dropdown），也是直接设置这个类属性就行了：
/* 当鼠标放置在有下拉列表的<li>对象上时 */
li.dropdown:hover ul {
display:list-item; /* 转换为列表元素，让其恢复显示 */
}
CSS部分
鼠标放上去没有个明显的视觉反馈，盯着左下角这也太蛋疼了，那么我们设置下当鼠标放置在每个选项上面的时候（:hover）背景颜色（background-color）和字体颜色（color）会发生变化：
/* 修改<div class="header">中，鼠标放在<li>标签上时的样式 */
div.topMenu li:hover {
background-color:#E4E4E4;
} /* 当<li>标签处于激活时<li>的<a>子标签的样式 */
li:hover>a{
color:#000000;
}
CSS部分
为什么设置的是<li>的背景而不是<a>标签的背景颜色呢？因为在我之前自己测试一遍的时候，设置<a>标签的背景颜色有时候会出现一个缝隙，我找不到解决的方法，就干脆设置<li>的背景颜色好啦┓( ´∀` )┏（你看右边那里，有个缝隙）：
大致效果基本上已经实现的差不多了，接下来就是一些样式的细化了。比如说现在二级菜单的<li>还残留这我们设置用来隔离横向菜单选项（一级菜单）的边框，我想要二级菜单比一级菜单更宽一点，二级菜单中的文本左对齐：
/* 设置二级菜单的<li>标签样式 */
ul.dropdown-content li {
border-right:transparent; /* 去除在一级菜单中设置的用于分隔标签的边框 */
width:200px; /* 设置指定宽度，保证所有选项宽度一致 */
text-align:left; /* 下拉列表的文字对齐方式为左对齐，不使用横向列表的居中属性 */
padding-left:20px; /* 设置左侧内边距偏移，不让它紧贴边缘 */
}
CSS部分
在二级菜单顶端加一个蓝色边框区分下二级菜单和一级菜单的分界，这个就只需要设置每一个二级菜单中的第一个<li>标签的样式（li:first-of-type）即可：
/* 给每一个垂直列表的第一个列表项加上一个蓝色的顶部边框 */
.dropdown li:first-of-type {
border-top:solid 2px blue;
}
CSS部分
把"百度"这个选项放到最右边，有特别的样式：
/* 修改<div class="header">中，鼠标放在"百度"的<li>标签上时的样式 */
div.topMenu li#baiDu:hover {
background-color:#E30000;
} /* 该属性会在设置当<li>标签处于激活时<li>的<a>子标签的样式 */
li#baiDu:hover a {
/* 为了看得清改变背景后的子，单独设置颜色 */
color:#FFFFFF;
}
CSS部分
晚些时候我会把这个例子的文件上传网盘贴链接在这里。
百度云：https://pan.baidu.com/s/1FxhctaQvZmX8l4IAwZkd0A
如果本文中有哪里有问题欢迎留言指出。本人还是个菜鸟（英语甚至小学生不如，我会好好努力的！），哪里写的有问题自己不一定能马上发现，您指出来那真是帮上大忙了。
个人练习：使用HTML+CSS制作二级菜单的更多相关文章
- CSS制作二级菜单时，二级菜单与一级菜单不对齐
效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...
- DIV+CSS制作二级横向弹出菜单，略简单
没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...
- 纯css制作三级菜单
<!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...
- css实现二级菜单显示和收缩
<ul class="nav"> <li><a href="#">一级菜单</a> <ul class=& ...
- 纯CSS制作二级导航
一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一 ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- html+css二级菜单制作！
二级菜单!!<!DOCTYPE html<html lang="e<head> <meta charset="UTF-8"> < ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- jQuery - 制作点击显示二级菜单效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
随机推荐
- ELK搭建elasticsearch常见报错
问题一: [2018-01-31T16:27:21,712][WARN ][o.e.b.JNANatives ] unable to install syscall filter: Java.lang ...
- MFCC特征参数提取流程概述
一 概念概述: 在语音识别(Speech Recognition)和话者识别(Speaker Recognition)方面,最常用到的语音特征就是梅尔倒谱系数(Mel-scale Frequenc ...
- PHP拿到接口数据返回的json以及传参-----ajax 跨域请求 ---
以下测试------ <php $ch = curl_init(); $str = '';//此处为接口地址以及传参------- curl_setopt($ch, CURLOPT_URL, $ ...
- redis安装以及安全配置
redis安装以及安全配置 1. 安装 sudo apt-get install redis-server 使用which查询redis执行体安装路径: which redis-server #/us ...
- Postgresql-模糊匹配大杀器
# Postgresql-模糊匹配大杀器 ## 问题背景 随着pg越来越强大,abase目前已经升级到5.0(postgresql10.4),目前abase5.0继承了全文检索插件(zhparser) ...
- 利用vi编辑器创建和编辑正文文件（二）
末行模式下的命令 1. w:写文件,将编辑的内容保存到文件系统. 2. w!:如果只读文件,强制写入系统. 3. q!:退出vi,但文件内容修改的话,系统要提示是否 ...
- Redis（2）---数据持久化
数据持久化 Redis有两种持久化的方式:快照(RDB文件)和追加式文件(AOF文件) (1)RDB持久化方式是在一个特定的间隔保存某个时间点的一个数据快照.(默认模式) (2)以日志的形式来记录每个 ...
- logstash解耦之redis消息队列
logstash解耦之redis消息队列 架构图如下: 说明:通过input收集日志消息放入消息队列服务中(redis,MSMQ.Resque.ActiveMQ,RabbitMQ),再通过output ...
- sql server 索引阐述系列六 碎片查看与解决方案
一 . dm_db_index_physical_stats 重要字段说明 1.1 内部碎片:是avg_page_space_used_in_percent字段.是指页的填充度,为了使磁盘使用状况达到 ...
- mysql 开发基础系列3 日期数据类型
日期类型 如果要用来表示年月日,通常用DATE 来表示. 如果要用来表示年月日时分秒,通常用DATETIME 表示. 如果只用来表示时分秒,通常用TIME 来表示. TIMESTAMP表示格式 :YY ...