Html css在下拉列表中有另一个下拉列表

我有这段代码

<li class="dropdown" runat="server" id="btn_logout">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user">USER</i> <b class="caret"></b></a>
  <ul class="dropdown-menu" style="background-color:black;">
    <li class="dropdown-header">DROPDOWN HERE: </li>
    <li><a href="#">Manage Account</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="logout.php">Sign Out</a></li>
  </ul>
</li>

下拉列表：

我想有另一个下拉列表，上面写着

下拉这里

。 我怎样才能做到这一点？

简短回答，引导程序上的子菜单

（TLDR）正如你所想象的，有一些黑客：

。下拉子菜单{
位置：相对位置；
}
.下拉子菜单>.下拉菜单{
排名：0；
左：100%；
利润上限：-6px；
左边距：-1px；
-webkit边界半径：0 6px 6px 6px；
-moz边界半径：0 6px 6px；
边界半径：0 6px 6px 6px；
}
.下拉子菜单：悬停>.下拉菜单{
显示：块；
}
.下拉子菜单>a:之后{
显示：块；
内容：“；
浮动：对；
宽度：0；
身高：0；
边框颜色：透明；
边框样式：实心；
边框宽度：5px 0 5px 5px；
左边框颜色：#ccc；
边缘顶部：5px；
右边距：-10px；
}
.下拉子菜单：悬停>a:之后{
左边框颜色：#fff；
}
.下拉式子菜单.向左拉{
浮动：无；
}
.下拉子菜单.向左拉>.下拉菜单{
左-100%；
左边距：10px；
-webkit边界半径：6px 0 6px 6px；
-moz边界半径：6px 0 6px 6px；
边界半径：6px 0 6px 6px；
}

您不能通过单击来完成，因为在子下拉列表中单击将关闭第一个。但是，当您将鼠标悬停在所需元素上时，可以使用CSS打开子下拉列表。欢迎使用StackOverflow！随着时间的推移，你会看到，这并不是“请寻求帮助”。我们经常会面临无法找到答案的疑问，我们可以利用这样的社区来帮助我们。这个社区要求你写出好的问题，如果你想在这方面做得更好，我建议你花点时间阅读这篇文章。