🎯功能简介
这是一个使用列表导航菜单的网页，包括一个水平方向的导航栏和多个下拉子菜单。主要功能如下：
1.点击每个导航菜单可以跳转到不同的页面。
2.鼠标悬停在每个导航菜单上时，会显示下拉子菜单，点击子菜单中的选项也可以跳转到相应的页面。
3.子菜单中的选项会在鼠标悬停时变色，并且有背景颜色高亮显示。
4.网页整体有一个蓝色的背景色，并且导航栏有黑色的边框。
5.子菜单的字体颜色是白色，在悬停时会变为红色。子菜单的背景颜色是蓝色。
6.导航菜单使用了无序列表（ul）和列表项（li）的标签，并且设置了样式，使得整个导航栏看起来更加美观。
7.使用 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>
