li menu hide behind when dropopen to select item

Question

When open dropdown to select an item and at the same time hover mouse of Dropdown it's submenu hide behind dropdownlist.Below is sample code.Please ref attached image for issue.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

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

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
  
</div>
<br>
<select><option>test doc1</option><option>test doc1</option><option>test doc1</option></select>
</body>
</html>

Does this answer your question? [HTML Select Drop Down Option Z-index](https://stackoverflow.com/questions/9210725/html-select-drop-down-option-z-index) — Aleksandr Belugin, Jan 29 '20 at 13:19
Does this answer your question? [How to make div go behind another div?](https://stackoverflow.com/questions/19561585/how-to-make-div-go-behind-another-div) — Liam, May 04 '22 at 12:19

score 0 · Answer 1 · answered Jan 29 '20 at 13:26

0

Add this in your style :

.dropdown:hover ~ select:focus{
      display:none;    
}

answered Jan 29 '20 at 13:26

Tony S

491
6
26

score 0 · Answer 2 · answered Jan 29 '20 at 14:24

If I understand you correctly, you want to make sure that the dropdown is over the dropdown list. You can do this by adding z-index to the .dropbox-content that looks like this:

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999;  <--- Added
}

li menu hide behind when dropopen to select item

2 Answers2