Проблема с выпадающим меню

Question

Привет Я пытаюсь создать раскрывающееся меню на изображениях, но когда я пытаюсь добраться до ссылок, я не могу закрыть меню, я хочу, чтобы меню под изображениями было где-то неподвижно , пожалуйста, помогите, спасибо :)

Также им с помощью Wordpress и визуальный композитор

Сайт: 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"> 

<a href="http://pro-av.panasonic.net/en/varicam/index.html" target="_blank">Varicam</a> 

<a href="http://www.panasonic.com/global/consumer/camcorder/index.html" target="_blank">AG-DVX 200</a> 

<a href="http://pro-av.panasonic.net/en/gh4u/index.html" target="_blank">AG-GH4U</a> 

<a href="http://pro-av.panasonic.net/en/ux/index.html" target="_blank">UX Series</a> 

<a href="http://pro-av.panasonic.net/en/gh4u/index.html" target="_blank">GH4</a> 

<a href="http://pro-av.panasonic.net/en/hd_camera/ag-ac30/index.html" target="_blank">AG-AC30</a> 

<a href="http://www.panasonic.com/global/consumer/camcorder/index.html" target="_blank">Consumer HD</a> 

</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

Переместить ДИВ внутриh6, а затем отрегулировать положение для 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"> 
 

 
    <a href="http://pro-av.panasonic.net/en/varicam/index.html" target="_blank">Varicam</a> 
 

 
    <a href="http://www.panasonic.com/global/consumer/camcorder/index.html" target="_blank">AG-DVX 200</a> 
 

 
    <a href="http://pro-av.panasonic.net/en/gh4u/index.html" target="_blank">AG-GH4U</a> 
 

 
    <a href="http://pro-av.panasonic.net/en/ux/index.html" target="_blank">UX Series</a> 
 

 
    <a href="http://pro-av.panasonic.net/en/gh4u/index.html" target="_blank">GH4</a> 
 

 
    <a href="http://pro-av.panasonic.net/en/hd_camera/ag-ac30/index.html" target="_blank">AG-AC30</a> 
 

 
    <a href="http://www.panasonic.com/global/consumer/camcorder/index.html" target="_blank">Consumer HD</a> 
 

 
    </div> 
 
    </h6> 
 
</div>