如何停止出现在列表项上的下拉列表

问题描述：

因此，我试图从列表项目配置一个简单的下拉列表，但我不能为我的生活找出为什么它不会停止覆盖列表项目时我徘徊在它上面。这里的HTML：如何停止出现在列表项上的下拉列表

<div class="dropdown" style="float:right"> 
       <li><a class="active dropbtn" href="">Profile</a></li> 
       <div class="dropdown-content"> 
       <a href="#">Link 1</a> 
       <a href="#">Link 2</a> 
       <a href="logout.php?logout"><span class="glyphicon glyphicon-log-out"></span>&nbsp; Logout</a></a> 
       </div> 
      </div>

而CSS样式是这样的：

tr:hover {background-color: #f5f5f5} 
th, td { 
padding: 15px; 
text-align: left; 
} 

/* The container <div> - needed to position the dropdown content */ 
.dropdown { 
position: relative; 
} 

/* Dropdown Content (Hidden by Default) */ 
.dropdown-content { 
display: none; 
position: absolute; 
background-color: #f9f9f9; 
min-width: 160px; 
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
z-index: 10; 
} 

/* Links inside the dropdown */ 
.dropdown-content a { 
color: black; 
padding: 12px 16px; 
text-decoration: none; 
display: block; 
} 

/* Change color of dropdown links on hover */ 
.dropdown-content a:hover {background-color: #f1f1f1} 

/* Show the dropdown menu on hover */ 
.dropdown:hover .dropdown-content { 
display: block; 
} 

/* Change the background color of the dropdown button when the dropdown  content is shown */ 
.dropdown:hover .dropbtn { 
background-color: #3e8e41;

除此之外，尽管改变了下拉元素的z-index的，我不能让菜单出现如果母公司列表位于

所有帮助表示赞赏

你在html和css中都有问题，你应该修复它。我不确定问题究竟是什么。请尝试更好地解释（发生什么你不想要的？你期望看到什么？） – Dekel

答

好菜单之外，代码给了我一些错误....请看看这个的jsfiddle并告诉我，如果它的工作ñ流？也请告诉我你想要什么，因为我有点糊涂..

https://jsfiddle.net/xxsycmyj/

<div class="dropdown" style="float:left"> 
      <li><a class="active dropbtn" href="">Profile</a></li> 
      <div class="dropdown-content"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="logout.php?logout"><span class="glyphicon glyphicon-log-out"></span>&nbsp; Logout</a> 
      </div>

的CSS看上去没什么问题。

如何停止出现在列表项上的下拉列表

相关推荐