Menu dropdown hover conflict with slider link below

Question

We appear to be having a conflict on our site homepage, where a link that sits below our dropdown menu is causing it to close the menu prematurely if the cursor enters the area the link occupies.

Any ideas what could be causing this?

The homepage is http://www.weddingideasmag.com and the link I'm trying to test is called 2014 Awards, under the main Awards tab.

This is definitely a slider link issue as the problem is only happening on the homepage where the slider links are. I have attached a screenshot of the problem area below.

Here is the same area highlighted in Chrome Developer Tools. I thought it may be a z-index issue but even if I change the dropdown ul z-index to greater than the link area the problem still persists.

The css for the dropdown menu is…

position: absolute;
top: auto;
display: none;
float: left;
zoom: 1;
z-index: 10;
margin: 0 0 40px -1px;
padding: 20px 0 6px;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #fafafa;
color: #676767;

And the css for the slider li element is…

position: absolute;
top: 0;
right: 0;
height: 100%;
width: 5%;

Answer 1

Set the a.flex-next's z-index to 9 instead of a random number as 99 which is > than the z-index of the dropdown ( z-index: 10 ). Seems to work, but your styles are generally quite messy.