如何在鼠标悬停时显示子菜单以获得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

我想你想要这样。

＆＃13;

＆＃13;

   

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你的意思是这样吗？

li {
  list-style:none;
  float:left;
  position:relative;
  padding:0 10px;
  border-right:1px solid;
}

.RP_SubMenu .sub_Listing {
  position:absolute;
  left:0;
  display:none;  
}

.RP_SubMenu:hover .sub_Listing {
  display:block;  
}

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

Answer 3

试试这个：

.drpMenu {
  list-style: outside none none;
}
.drpMenu > li {
  float: left;
  padding-right: 2%;
  width: auto;
}
.drpMenu a {
  color: #000;
  text-decoration: none;
}
.sub_Listing {
  display: none;
  list-style: outside none none;
}
li.RP_SubMenu:hover .sub_Listing {
  display: block;
}

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

Answer 4

您可以像这样创建，请参阅下面的代码和演示。

你可以在这里看到演示。 https://jsfiddle.net/b0L4evxv/

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

CSS代码

.drpMenu{ 
           list-style:none;
           padding:0;
        }
       .drpMenu li{
           float:left;
           position:relative
        }
       .drpMenu> li> a{
           color:#000;
           text-decoration:none;
           padding:10px;
        }
       .drpMenu li > a:hover{
           color:green;
       }
      .drpMenu li .sub_Listing{
          display:none;
          position:absolute;
          list-style:none;
          left:0;
          padding:0;
          top:28px;
          background:green
       }
       .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;
      }