The main section is position:relative which means that it has more priority over the nav and therefore cuts off the dropdown when you try to reach it. Just give the nav a higher z-indez and position:relative.
Don’t place the dropdown too far away from the trigger item because even if there is a 1px gap you will not be able to reach the menu before it disappears. There must always be a connection between the trigger item and the dropdown.
I would also set the list item to be display:inline-block as some browsers don’t like positioning in respect of inline elements.
Here is the revised dropdown code:
.nav {
border: 1px solid #FFAE00;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
position:relative;
z-index:9;
}
.nav ul{margin:0;padding:0;list-style:none}
.nav li {
display: inline-block;
text-decoration: none;
position: relative;
}
.nav a {
display: inline-block;
padding: 10px;
}
ul ul {
display: none;
width: 200px;
position:absolute;
top:100%;
left: 0;
text-align:left;
background:rgba(0,0,0,0.7);
box-shadow:10px 10px 10px rgba(255,255,255,0.1);
}
ul ul > li {
float: none;
position: relative;
}
ul > li:hover > ul { display: block; }
ul > li:hover >a{ color: #FFAE00;}
Just replace your section with the above.
Note that usually you would place page defaults like your links at the top of the stylesheet and not mixed in with other code: