本文通过实例教学，涵盖了一级与二级菜单设计、响应式布局调整及多种应用场景下的菜单设计，包括学校网站、京东首页及后端管理系统等，全面展示了系统常用菜单的设计方法与技巧。
任务描述
设计学校导航栏
设计要求提炼如下：
-
一级菜单：
- 背景颜色为黑色。
- 鼠标悬停时背景颜色变为rgb(90, 88, 88);。
- 文本颜色为白色，且文本居中显示。
-
二级菜单：
- 背景颜色为深灰色（#333）。
- 鼠标悬停时背景颜色变为绿色（#4cb051），与一级菜单一致。
- 文本颜色为白色，且文本居中显示。
-
整体布局：
- 一级和二级菜单均使用无序列表（ul）和列表项（li）进行布局。
- 二级菜单在悬停时显示在一级菜单下方，保持层次关系。
-
响应式设计：
- 设计应适应不同屏幕宽度，确保菜单在各种设备上可读。
任务实施
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>菜单设计</title>
<style>
.header {
background-color: #4cb051;
height: 92px;
display: flex;
justify-content: center;
font-size: 40px;
align-items: center;
color: white;
}
#menu {
background-color: black;
height: 30px;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
display: inline-block; /* 改为 inline-block，以确保宽度生效 */
height: 30px;
background: #000;
width: 120px;
position: relative; /* 为了定位二级菜单 */
}
ul li a {
color: white;
text-decoration: none;
display: block;
height: 30px;
line-height: 30px;
text-align: center; /* 文本居中 */
}
ul li:hover a {
background-color: rgb(90, 88, 88); /* 一级菜单悬停时背景色 */
}
ul li ul {
display: none; /* 默认隐藏二级菜单 */
position: absolute; /* 在父级元素下方显示 */
background-color: #333; /* 二级菜单背景色 */
padding: 0;
z-index: 1; /* 确保二级菜单在上层 */
}
ul li:hover ul {
display: block; /* 悬停显示二级菜单 */
}
ul li ul li {
width: 120px; /* 二级菜单项的宽度 */
float: none; /* 取消浮动，保持在新行 */
}
ul li ul li a {
line-height: 30px; /* 二级菜单文本居中 */
color: #fff; /* 二级菜单文字颜色 */
}
ul li ul li a:hover {
background-color: #4cb051; /* 二级菜单悬停时颜色与一级菜单一致 */
}
</style>
</head>
<body>
<div class="header">北京******大学</div>
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">学院概况</a></li>
<li>
<a href="#">学院动态</a>
<ul>
<li><a href="#">学院新闻</a></li>
<li><a href="#">学院活动</a></li>
</ul>
</li>
<li><a href="#">招生信息</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
</html>
