🎃个人专栏：
🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客
🐳Java基础：Java基础_IT闫的博客-CSDN博客
🐋c语言：c语言_IT闫的博客-CSDN博客
🐟MySQL：数据结构_IT闫的博客-CSDN博客
🐠数据结构：数据结构_IT闫的博客-CSDN博客
💎C++：C++_IT闫的博客-CSDN博客
🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客
💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客
🥏python：python_IT闫的博客-CSDN博客
🐠离散数学：离散数学_IT闫的博客-CSDN博客
🥽Linux：Linux_Y小夜的博客-CSDN博客
🚝Rust：Rust_Y小夜的博客-CSDN博客
欢迎收看，希望对大家有用！
目录
🎯功能简介
🎯代码解析
🎯核心代码
🎯效果展示
🎯功能简介
这是一个使用列表导航菜单的网页，包括一个水平方向的导航栏和多个下拉子菜单。主要功能如下：
- 点击每个导航菜单可以跳转到不同的页面。
- 鼠标悬停在每个导航菜单上时，会显示下拉子菜单，点击子菜单中的选项也可以跳转到相应的页面。
- 子菜单中的选项会在鼠标悬停时变色，并且有背景颜色高亮显示。
- 网页整体有一个蓝色的背景色，并且导航栏有黑色的边框。
- 子菜单的字体颜色是白色，在悬停时会变为红色。子菜单的背景颜色是蓝色。
- 导航菜单使用了无序列表（ul）和列表项（li）的标签，并且设置了样式，使得整个导航栏看起来更加美观。
- 使用 CSS 在样式中设置了每个导航菜单和子菜单的位置、大小、颜色、字体等属性。
🎯代码解析
复制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>使用列表导航菜单</title> <!-- 这里是 CSS 样式 --> </head> <body> <div> <ul class="menu"> <li> <a href="#">学校首页</a> </li> <li> <a href="#">学校概况</a> <ul> <li>科大简介</li> <li>现任领导</li> <li>组织机构</li> </ul> </li> <!-- 其他菜单项和子菜单 --> </ul> </div> </body> </html> HTML 部分定义了一个基本的网页结构，包括导航菜单和子菜单
复制
<style> *{ margin: 0; padding: 0; } div{ width: 1100px; height: 50px; background-color: #009; border: 1px solid black; margin: 0 auto; } ul{ list-style: none; } .menu>li{ width: 110px; float: left; } a{ display: block; text-align: center; text-decoration: none; color: #fff; font-weight: bold; line-height: 50px; } a:hover{ background-color: #006; color: red; } .menu>li>ul{ background-color: #00f; line-height: 50px; font-size: 14px; display: none; color: #fff; text-align: center; } .menu>li:hover>ul{ display: block; } .menu>li>ul>li:hover{ color: #df4136; background-color: #2a40bd; } </style> CSS 部分定义了页面的样式，包括背景颜色、字体颜色、边框等。这段代码实现了一个简单的水平导航菜单，并且包含了鼠标悬停显示子菜单的效果。
🎯核心代码
<div> <ul class="menu"> <li> <a href="#">学校首页</a> </li> <li> <a href="#">学校概况</a> <ul> <li>科大简介</li> <li>现任领导</li> <li>组织机构</li> </ul> </li> <!-- 其他菜单项和子菜单 --> </ul> </div>
