HTML下拉列表css布局

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>

技术要点

• 下拉菜单需边的子菜单隐藏（使用display:none;将元素隐藏）
• 鼠标悬浮样式（div:hover）
• 父元素相对定位（position:relative;）
• 子元素绝对定位（position:absolute;）