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;)