HTML下拉列表css布局

最新推荐文章于 2025-06-19 03:39:14 发布

原创最新推荐文章于 2025-06-19 03:39:14 发布 · 3.7k 阅读

14 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML和CSS创建一个简单的下拉菜单。通过设置相对和绝对定位，结合display属性，实现在鼠标悬停时显示子菜单的效果。

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

HTML+CSS实现简单的下拉列表初级小案例

首先在html中简单布局

<div class="nav-cont">
<ul class="main">         //第一个下拉列表
    <li >第一个</li>
    <li class="content">  
        <p>第一个子元素</p>
        <p>第一个子元素</p>
    </li> 
</ul>
<ul class="main">         //第二个下拉列表
    <li >第二个</li>
    <li class="content">
            <p>第二个子元素</p>
            <p>第二个子元素</p>
    </li></ul>
</div>

css样式设置

<style>
    *{
        list-style: none;     //清除li标签的无序标符
    }
   .nav-cont{
        display:flex;         //布局ul下li标签使该子元素左右布局
    }
.main{
 position: relative;       //父元素设置相对定位
 
}
.content{
    position: absolute;   // 子元素设置绝对定位脱离文档
    display: none;      //隐藏lic

}

//  鼠标移动到 ul 上触发hover事件将li转换为块元素 
.main:hover .content{
    display: block;
    cursor: pointer;
}
</style>

技术要点