css下拉菜单（注意浮动，注意：hover的运用）

最新推荐文章于 2024-02-15 09:15:57 发布

11路的卷尺

最新推荐文章于 2024-02-15 09:15:57 发布

阅读量360

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_72711350/article/details/127536396

版权

本文详细介绍了如何使用CSS创建下拉菜单，重点探讨了浮动布局和:hover伪类的应用，帮助开发者实现交互式前端导航栏。

摘要由CSDN通过智能技术生成

<!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>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }
      li {
         list-style: none;
      }
      .box {
         width: 500px;
         height: 50px;
         background-color: rgb(232, 73, 73);
         margin: 10px auto;
      }
      .box .bar {
         float: left;
         /* 添加float会造成父盒子的塌陷，使其无法撑开高度： */
         width: 250px;
         line-height: 50px;
         text-align: center;
      }
      .box .bar ul{
         display: none;
         background-color: rgb(41, 190, 38);
         color: blue;
      }
      .box .bar:hover ul{
         display: b