二级菜单的实现思路为： 1.在默认状态下，使用display:none;将二级菜单隐藏。 2.当一级菜单中的列表标签li获取焦点(hover)后，使用display:blick;将二级菜单显示出来。 3.使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。
本内容面向小白向，我在代码中加了详细的注释，解释了语句的作用。
二级菜单展开后 效果如下(没有美化，见谅)：
html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>二级菜单</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body> <div class="menu"> <ul> <li>首页</li> <li>博客 <ul> <li>博客1</li> <li>博客2</li> <li>博客3</li> </ul> </li> <!-- 注意：需要将二级菜单的ul放在一级菜单的li标签内 --> <li>新闻</li> <li>账户</li> </ul> </div> </body> </html>
CSS代码如下：
ul li{ list-style: none; /* 清除列表原有样式 */ } .menu{ width: 600px; height: 60px; background-color: aquamarine; } .menu ul li{ float: left; /* 使列表(一级菜单)横向 */ margin-right: 50px; margin-top: 20px; /* 设置一级菜单内容的位置 */ position: relative; } .menu ul li ul{ width: 100px; height: 160px; margin-left: -50px; background-color: #7FFFD4; display: none; /* 设置初始为不显示 */ position: absolute; } .menu ul li:hover ul{ display: block; /* 当一级菜单的li获取hover后将二级菜单的ul显示出来 */ }
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)