头菜单_meatball menu-优快云博客

本文链接：https://blog.youkuaiyun.com/Meatball_MMY/article/details/89364409

本文详细介绍了如何使用HTML和CSS创建一个响应式的菜单栏，包括清除默认样式、设置菜单项样式、实现鼠标悬停效果及下拉子菜单功能。通过实际代码演示了如何使菜单项在悬停时改变颜色和背景，以及如何展示和隐藏子下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.写出主体部分，body代码如下（ul>li,清除li文字样式的点）

<body>
<ul class="menu">
    <li class="menu_li">首页</li>
    <li class="menu_li">薪资要求</li>
    <li class="menu_li">职位目标</li>
    <li class="menu_li">商圈位置</li>
    <li class="menu_li">个人前景</li>
    <li style="clear: left; height: 0px;"></li>
</ul>
</body>

2. 写出通用样式，清除固定设定

 *{
            margin: 0px;
            padding: 0px;
  }

3.设置menu,menu_li样式

ul.menu{
            background-color: pink;/*设置背景色*/
            padding: 10px 10px;/*元素与边框下右上左之间距离*/
            max-height: 40px;}
ul.menu>li.menu_li{
            list-style: none;/*清除列表样式（圆点）*/
            float: left;/*左浮动*/
            min-width: 120px;
            text-align: center;/*文本居中*/
            font-size: 14px;
            background-color: greenyellow;
            line-height: 40px;/*行高*/
        }

4.设置鼠标悬停点击伪类

.menu_li:hover{
            color: darkorchid;
            background-color: white !important;
              }
.menu_li:active{
            color: yellow;
               }

最终效果如下：

5.做子下拉列表，内嵌ul>li

<li class="menu_li">职位目标
        <ul class="menu_child">
            <li class="menu_child_list">web前端</li>
            <li class="menu_child_list">Linux</li>
            <li class="menu_child_list">Java</li>
            <li class="menu_child_list">Python</li>
        </ul>
</li>

6.设置menu_child,menu_child_list样式

.menu_child{
            background-color: greenyellow;
            display: none;/*子列表模块隐藏*/
        }
.menu_child_list{
            list-style: none;
            text-align: left;
            padding-left: 10px;
            height: 40px;
            color: black;
            line-height: 40px;
        }

7.设置鼠标悬停，点击伪类

.menu_child_list:hover{
            color: darkorchid;
            background-color: white !important;/*!important提高此条代码颜色显示优先级*/
        }
.menu_li:hover>.menu_child{
            display: block;/*鼠标悬停时模块显示*/
        }

最终效果如下：