我有一个类似于
<ul class="drpMenu" role="menu">
<li><a href="#" id="SendReminder_Rpt">Send Reminder</a></li>
<li><a href="#">View Document</a></li>
<li><a href="#">Download Document</a></li>
<li class="RP_SubMenu">
<a href="javascript:void(0)">Resend Pin Code</a>
<ul class="sub_Listing">
<li>
<a href="#">SubMenu1</a>
</li>
<li>
<a href="#">SubMenu2</a>
</li>
</ul>
</li>
</ul>
当鼠标悬停
ul
li类时,我需要显示子目录ulli类。我只是试着把li
给RP_SubMenu
和position:absolute
给RP_SubMenu
,然后position :relative
就下降到sub_Listing
。我是css和html新手。有人能帮忙吗?提前谢谢你的帮助。
最佳答案
我想你想要这样。
.drpMenu{
list-style:none;
padding:0;
}
.drpMenu li{
float:left;
position:relative
}
.drpMenu> li> a{
color:#000;
text-decoration:none;
padding:10px;
background:#ccc;
}
.drpMenu li > a:hover{
color:red;
}
.drpMenu li .sub_Listing{
display:none;
position:absolute;
list-style:none;
left:0;
padding:0;
top:28px;
background:rgba(0,0,0,0.8)
}
.drpMenu li:hover .sub_Listing{
display:block
}
.drpMenu li .sub_Listing a{
padding:5px 10px;
display:block;
color:#fff;
text-decoration:none;
}
.drpMenu li .sub_Listing a:hover{
color:#ccc;
}
<ul class="drpMenu" role="menu">
<li><a href="#" id="SendReminder_Rpt">Send Reminder</a></li>
<li><a href="#">View Document</a></li>
<li><a href="#">Download Document</a></li>
<li class="RP_SubMenu">
<a href="javascript:void(0)">Resend Pin Code</a>
<ul class="sub_Listing">
<li>
<a href="#">SubMenu1</a>
</li>
<li>
<a href="#">SubMenu2</a>
</li>
</ul>
</li>
</ul>
关于html - 如何显示鼠标悬停的ul li结构子菜单,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37650005/