リストアイテムの上に表示されるドロップダウンリストを停止する方法

Question

リストアイテムから単純なドロップダウンリストを設定しようとしていますが、私はそれの上に乗る。

<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は次のとおりです：ここではHTMLです。このほかに

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インデックスを変更するにもかかわらず、私はメニューが表示されるように得ることができません親リストが配置されているメニュー

の外にすべてのヘルプは

Answer 1

まあが高く評価され、コードは私にいくつかのエラーを与えた....このJSfiddleを見てください、それがnに働いているなら、私に教えてああ？また、私は少し混乱しているので、あなたが欲しいものを教えてください。..

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が私には罰金に見えました。