横向下拉菜单

最新推荐文章于 2024-06-18 14:37:18 发布

打马御街前

最新推荐文章于 2024-06-18 14:37:18 发布

阅读量739

点赞数 1

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

版权

这篇博客详细介绍了如何使用CSS一步步实现横向下拉菜单的布局和样式设定，包括body部分的基础设置、通用样式的定义、鼠标伪类的处理、内嵌列表的样式以及特定菜单项的悬停效果，最终展示了一个完整的下拉菜单效果。

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

1.设置body部分（block>ul.menu>li>span）

<body>
<div class="block">
    <ul class="menu">
        <li>
            <span>卡一</span>
        </li>
        <li>
            <span>卡二</span>
        </li>
        <li>
            <span>卡三</span>
        </li>
        <li>
            <span>卡四</span>
        </li>
        <li>
            <span>卡五</span>
        </li>
    </ul>
</div>
</body>

2.设置通用样式

 *{
          margin: 0;
          padding: 0;
  }

3.设置样式（block>ul.menu>li>span）

.block{
            margin: auto;
            width: 500px;
            height:400px;
            position: relative;/*外部容器设为相对定位*/
        }
        

.menu>li{
            width: 100px;
            height: 25px;
            list-style: none;
            float: left;
            text-align: center;
            border: 1px solid silver;
            box-sizing: border-box;

        }
      

.menu>li>span{
          width: 100px;
          height: 25px;
          position: relative;/*设为相对位置*/
          z-index: 2;/*设置显示层次，用以出现在最外层*/
          display: block;
          box-sizing: border-box;
      }

4.设置鼠标伪类

.menu>li:hover{
            color: red;
            cursor: pointer;/*鼠标悬停时变成抓手*/
            border-color: red red white red;/*设置四边框，上右下左，红红白红*/
              }
.menu>li:hover span{
          border-bottom: 1px solid white;
                   }

效果如下：

5.设置内嵌列表

<ul class="menu">
        <li>
            <span>卡一</span>
        <div class="menu-1">卡一</div>/*内嵌列表*/
        </li>
        <li>
            <span>卡二</span>
            <div class="menu-1">卡二</div>
        </li>
        <li>
            <span>卡三</span>
            <div class="menu-1">卡三</div>
        </li>
        <li>
            <span>卡四</span>
            <div class="menu-1">卡四</div>
        </li>
        <li>
            <span>卡五</span>
            <div class="menu-1">卡五</div>
        </li>
</ul>

效果如下：

6.设置menu-1样式

.menu-1{
            border: 1px solid red;
            width: 500px;
            height: 375px;
            position: absolute;/*设置绝对定位*/
            left: 0;
            top: 25px;
            display: none;/*设置容器内容隐藏*/
            text-align: left;
        }

7.设置鼠标悬停

.menu>li:hover .menu-1{
            display: block;/*设置模块内容显示*/
        }
.menu>li:hover span{
          border-bottom: 1px solid white;
        }

最终效果如下图：