html - 如何在鼠标悬停时显示 ul li 结构的子菜单

Question

我有一个 ul li 结构，如

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

我需要在鼠标悬停在 RP_SubMenu li 类时显示 sub_Listing ul li 类。我只是尝试将 position:absolute 给 RP_SubMenu 并将 position:relative 给 sub_Listing 然后 sub_Listing 正在下降到 RP_SubMenu。

我是 css 和 html 的新手。谁能帮忙？在此先感谢您的帮助。

Answer 1

我想你想要这样。

   

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