Как остановить раскрывающийся список, появляющийся поверх элемента списка

Question

Итак, я пытаюсь настроить простой выпадающий список из элемента списка, но я не могу на всю жизнь понять, почему он не перестанет закрывать элемент списка, когда Я нависаю над ним. Вот 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-индекс раскрывающихся элементов я не могу получить меню появится вне меню, где родительский список находится

Вся помощь ценится

Answer 1

Ну, код дал мне несколько ошибок .... Пожалуйста, посмотрите на это 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-выглядел хорошо для меня.