下拉菜单有问题

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

将内的div 移至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>