CSS Dropdown Menu with Border & z-index - html

Question

I have a fiddle going here:
https://jsfiddle.net/vjdz8kxr/
<div class="span-8 last" id="primary_nav_wrap">
<ul>
<li>
Home
</li>
<li>Knowledge
<ul>
<li>kb1</li>
<li>kb2</li>
<li>kb3</li>
</ul>
</li>
<li>Forums
<ul>
<li>forum1</li>
<li>forum2</li>
<li>forum3</li>
</ul>
</li>
<li>Groups
<ul>
<li>group1</li>
<li>group2</li>
<li>group3</li>
</ul>
</li>
<li>Blogs
<ul>
<li>blog1</li>
<li>blog2</li>
<li>blog3</li>
</ul>
</li>
</ul>
#primary_nav_wrap { float:right; }
#primary_nav_wrap ul { list-style:none; margin:0; padding:0; text-transform: uppercase; }
#primary_nav_wrap ul a { display:block; color:#666666; text-decoration:none; font-weight:600; font-size:14px; line-height:30px; padding:0 15px; font-family:proxima-nova,sans-serif;}
#primary_nav_wrap ul li { float:left; padding:2px; }
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:2px solid #ee6129; position:relative; z-index:5; }
#primary_nav_wrap #home ul li:hover {border:2px solid #efefef; border-bottom:2px solid #efefef;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:0; z-index:-1;}
#primary_nav_wrap ul li:nth-last-child(1) ul { left:-101px;} /* Right Most Menu will pop to left so it doesn't bleed off page*/
#primary_nav_wrap ul ul li {float:none; width:220px; text-align:left;}
#primary_nav_wrap ul ul li:hover {background: #ee6129; text-align:left; border:none; padding:2px; }
#primary_nav_wrap ul ul a { line-height:120%; padding: 5px;}
#primary_nav_wrap ul ul ul { top:0; left:100% }
#primary_nav_wrap ul li:hover > ul { display:block}
Basically, I am trying to make a border around the drop down, minus the part of the border that exists under the main menu's title. In this case, I have made that line Orange, so it is obvious whether this is working.
What I am expecting is that the orange line will show on top of the grey, with the z-index I have in place. I also am assuming that since the elements have a position (absolute or relative) that this should work.
Can anyone see what I am doing wrong here?

Answer 1

Here is a solution assuming the colors are basically staying the same.
Remove the border bottom (orange) on the main menu li:hover (border-bottom:none)
Also remove the z-index of 5 from that CSS Rule
Add a background of white to the selector.
Add a negative margin-top to your child (submenu). You added a negative left margin but there is no negative top.
Or just follow this: https://jsfiddle.net/vjdz8kxr/6/
#primary_nav_wrap ul li:hover {padding:0; border: 2px solid #efefef; border-bottom:none; position:relative; background:white;}
#primary_nav_wrap ul ul { display:none; position:absolute; left:0; background:#fff; text-transform:none; border:2px solid #efefef; margin-left:-2px; margin-top:-2px; z-index:-1;}
EDIT:
To add a little explanation: If you have a parent you want the parent to appear behind the child, the parent cannot have a z-index declaration AT ALL. Even if it is negative. Here is some proof: http://codepen.io/tylerism/pen/NGNxWR