Button dropdown menu disappears - html

Question

I added the following code for my button drop-down for my page http://test.hkkkki.eu/ and here it is the code snippet:
.dropbtn {
background-color: #ff4e39;
color: white;
padding: 0px 16px 0px 6.4px;
font-size: 16px;
border: none;
font-family: 'Josefin Sans',Helvetica,Arial,Lucida,sans-serif;
transition: all 0.5s ease;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color:#fff;
background-color:#ff4e39;
text-decoration: none;
display: block;
}
.dropdown-content a:hover { color:#000; transition: all 0.5s ease;}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #ff4e39;}
<div class="dropdown">
<button class="dropbtn">press</button>
<div class="dropdown-content">
priopćenja
foto
video
iz medija
</div>
</div>
The result is not good, as the drop-down disappears when trying to pick a sub-menu option. And it is also not on top of the following content. It's probably due to Z-index, but I tried more than a couple of places to put it, and it didn't work. Any help is greatly appreciated.

Answer 1

I can see what you mean when I go to your website. I can't see the problem exactly in your code but it seems like the drop down entitled 'press' works fine, are you using the same classes to reference the dropdowns? It would be nice to see the way you created the 'press' dropdown so we can compare and see what went wrong.
Regardless here is the best I can do. w3schools has a very handy tutorial on everything you need to make a hoverable drop down. Here is a snippet to attempt to answer your question:
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.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;
}
/* 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: #ddd
}
/* 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;
}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>