制作简单的下拉悬停菜单的导航栏
捋清楚导航栏结构
<!-- 背景栏 -->
<div id="menu">
<!-- 使一级菜单在页面居中显示 -->
<div id="box">
<div id="First_menu">首页</div>
<div id="First_menu">学校概况
<div id="Secondary_menu">
<div>学校标识</div>
<div>学校简介</div>
<div>学校领导</div>
<div>校园风光</div>
</div>
</div>
<div id="First_menu">机构设置
<div id="Secondary_menu">
<div>教学单位</div>
<div>职能部门</div>
</div>
</div>
<div id="First_menu">教育教学</div>
<div id="First_menu">招生就业
<div id="Secondary_menu">
<div>招生</div>
<div>就业</div>
</div>
</div>
<div id="First_menu">人才建设
<div id="Secondary_menu">
<div>人才培训</div>
<div>人才引进</div>
<div>干部学院</div>
</div>
</div>
<div id="First_menu">国际交流
<div id="Secondary_menu">
<div>友好往来</div>
</div>
</div>
<div id="First_menu">数字中心
<div id="Secondary_menu">
<div>校园网</div>
</div>
</div>
</div>
</div>
采用四层结构，依次作用
最外层 作为 导航栏的背景
里二层 容纳 导航栏的一级菜单，方便调整导航栏的位置
内两层 作为 导航栏的主体内容
明确页面效果
我们想要的效果是：当鼠标悬停在一级菜单时，显示出对应的二级菜单内容；通常情况下，二级菜单被隐藏
本文内使用对比度高的三种颜色，使菜单内容、 CSS 效果更加明显
制作一级菜单效果
一级菜单需要在页面的顶部且内容居中显示
* {
margin: 0px;
padding: 0px;
font-size: 20px;
}
#menu {
width:100%;
height:30px;
background-color: red;
}
#box {
/* 根据一级菜单数量变化 */
width:800px;
margin: auto;
}
#First_menu {
font-family: 'fangsong';
float:left;
width: 100px;
line-height: 30px;
color: white;
position: relative;
text-align: center;
}
*：
- 重置页面的内边距和外边距，避免在不同浏览器效果不一致
#box：
- 将背景栏占据整个页面的最上方
- 而宽度可以根据导航栏的数量进行适当调整，
- 背景色为红色
#First_menu：
- 设置字体为宋体
- 使导航内容在一行内显示，并向左对齐
- 给导航栏相同的宽度
- 使文字垂直方向上居中，更加美观
- 设置字体颜色为白色，即使页面是黑色，也能显示导航栏内容
- 采用相对定位，遵循 子绝父相 的原则
- 使文字水平方向上居中，更加美观
对应效果
此时，当鼠标滑过导航栏时，是没有二级菜单显示的
二级菜单效果
通常情况下，二级菜单被隐藏，只有一级菜单被鼠标悬停时，才显示出来
#First_menu:hover {
background-color: green;
}
#Secondary_menu {
display: none;
}
#First_menu:hover > #Secondary_menu {
/* 继承父标签的 font-family、width、line-height、color、text-align 属性*/
display: block;
background-color: blue;
position: absolute;
width: 100px;
top: 30px;
}
#First_menu:hover：
使用伪类选择器，当一级菜单被鼠标悬停时，展示的效果
- 被悬停时，背景色为绿色，根据需求进行调整
#Secondary_menu
- 隐藏二级菜单内容
#First_menu:hover > #Secondary_menu：
当一级菜单被鼠标悬停时，其所有子标签，展示的效果
- 设置成块元素
- 背景色为蓝色
- 采用绝对定位，遵循 子绝父相 的原则
- 二级菜单的宽度，建议与导航栏的宽度保持一致
- 二级菜单离页面顶部的长度，建议与导航栏的高度保持一致
对应效果
至此，我们就完成了 一个简单的下拉悬停菜单的导航栏
此代码还有很大优化空间，如：
整个导航栏过小，字体过小，不够美观
原文地址：https://blog.csdn.net/m0_70851096/article/details/143497092
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！