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

我有一个

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\u子菜单

li类上时，我需要显示子类。我只是试着给

position:absolute

赋予

RP\u子菜单

和

position:relative

赋予

sub\u列表

，但是

sub\u列表

将进入

RP\u子菜单

---

我是css和html的新手。有人能帮忙吗？提前谢谢你的帮助。

你是说这样的事吗

li{
列表样式：无；
浮动：左；
位置：相对位置；
填充：0 10px；
右边框：1px实心；
}
.RP_子菜单.sub_列表{
位置：绝对位置；
左：0；
显示：无；
}
.RP_子菜单：悬停.sub_列表{
显示：块；
}

你的意思是这样的吗

li{
列表样式：无；
浮动：左；
位置：相对位置；
填充：0 10px；
右边框：1px实心；
}
.RP_子菜单.sub_列表{
位置：绝对位置；
左：0；
显示：无；
}
.RP_子菜单：悬停.sub_列表{
显示：块；
}

试试这个：

.drpMenu{
列表样式：外部无；
}
.drpMenu>li{
浮动：左；
右：2%；
宽度：自动；
}
.drpMenu a{
颜色：#000；
文字装饰：无；
}
.sub_上市{
显示：无；
列表样式：外部无；
}
li.RP_子菜单：hover.sub_列表{
显示：块；
}

试试这个：

.drpMenu{
列表样式：外部无；
}
.drpMenu>li{
浮动：左；
右：2%；
宽度：自动；
}
.drpMenu a{
颜色：#000；
文字装饰：无；
}
.sub_上市{
显示：无；
列表样式：外部无；
}
li.RP_子菜单：hover.sub_列表{
显示：块；
}

我想你想要这样

.drpMenu{
列表样式：无；
填充：0；
}
李博士{
浮动：左；
职位：相对
}
.drpMenu>li>a{
颜色：#000；
文字装饰：无；
填充：10px；
背景：#ccc；
}
.drpMenu li>a：悬停{
颜色：红色；
}
.drpMenu li.sub_列表{
显示：无；
位置：绝对位置；
列表样式：无；
左：0；
填充：0；
顶部：28px；
背景：rgba（0,0,0,0.8）
}
.drpMenu li:hover.sub_列表{
显示：块
}
.drpMenu li.sub_清单a{
填充物：5px10px；
显示：块；
颜色：#fff；
文字装饰：无；
}
.drpMenu li.sub_清单a：悬停{
颜色：#ccc；
}

我想你想要这样

.drpMenu{
列表样式：无；
填充：0；
}
李博士{
浮动：左；
职位：相对
}
.drpMenu>li>a{
颜色：#000；
文字装饰：无；
填充：10px；
背景：#ccc；
}
.drpMenu li>a：悬停{
颜色：红色；
}
.drpMenu li.sub_列表{
显示：无；
位置：绝对位置；
列表样式：无；
左：0；
填充：0；
顶部：28px；
背景：rgba（0,0,0,0.8）
}
.drpMenu li:hover.sub_列表{
显示：块
}
.drpMenu li.sub_清单a{
填充物：5px10px；
显示：块；
颜色：#fff；
文字装饰：无；
}
.drpMenu li.sub_清单a：悬停{
颜色：#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>

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