我有一个类似于

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

当鼠标悬停ulli类时,我需要显示子目录ulli类。我只是试着把liRP_SubMenuposition:absoluteRP_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/

10-12 13:07
查看更多