2016-10-10 100 views
0

因此,我試圖從列表項目配置一個簡單的下拉列表,但我不能爲我的生活找出爲什麼它不會停止覆蓋列表項目時我徘徊在它上面。這裏的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的,我不能讓菜單出現如果母公司列表位於

所有幫助表示讚賞

+0

你在html和css中都有問題,你應該修復它。我不確定問題究竟是什麼。請嘗試更好地解釋(發生什麼你不想要的?你期望看到什麼?) – Dekel

回答

0

好菜單之外,代碼給了我一些錯誤....請看看這個的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看上去沒什麼問題。