Trouble with dropdown menu - html

Question

Hi I'm trying to make a dropdown menu on the pictures but when I try to get to the links I can't the menu closes, i want the menu under the picture boxes where it is but fixed, please help, Thanks :)
Also im using Wordpress and visual composer
Site: http://www.corebusinesssa.co.za/Test/
HTML:
<div class="dropdown">
<h6 style="text-align: center;"><span style="color: #000000;"><strong>4K/HD Camcorders</strong></span><img class="dropdownimg dropdownimg2 aligncenter wp-image-391 size-full" src="http://www.corebusinesssa.co.za/Test/wp-content/uploads/2016/09/4k-cameras.png" width="104" height="70" /></h6>
<div class="dropdown-content">
Varicam
AG-DVX 200
AG-GH4U
UX Series
GH4
AG-AC30
Consumer HD
</div>
</div>
CSS:
/* The container - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
width: 106%;
height:95px;
top: -25px;
left: -6px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
overflow:auto
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
top: 125px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 0px 16px;
text-decoration: none;
text-align:center;
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;
}

Answer 1

Move the div inside the h6 and then adjust the position to top:100%.
/* The container - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
width: 106%;
height: 95px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
top: 100%;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
h6:hover .dropdown-content {
display: block;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 0px 16px;
text-decoration: none;
text-align: center;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
<div class="dropdown">
<h6 style="text-align: center;"><span style="color: #000000;"><strong>4K/HD Camcorders</strong></span><img class="dropdownimg dropdownimg2 aligncenter wp-image-391 size-full" src="http://www.corebusinesssa.co.za/Test/wp-content/uploads/2016/09/4k-cameras.png" width="104" height="70" />
<div class="dropdown-content">
Varicam
AG-DVX 200
AG-GH4U
UX Series
GH4
AG-AC30
Consumer HD
</div>
</h6>
</div>