1 unexplained transparent pixel at bottom of dropdown nav menu - html

Question

this is sort of a continuation of this solved question.
as you can see in this fiddle the 3rd level dropdown is working but the fix has created this unexplainable single pixel transparent border at the bottom of the dropdowns. You can see it if you look closely between the dropdown and the box-shadow.
html:
<nav id="menu" class="dark_menu">
<!-- Main Nav Start -->
<ul id="main-nav" class="clearfix">
<li id="port" class="parent menu-item">Portfolio
<ul class="clearfix">
<li id="regular" class="parent menu-item">Regular
<ul class="clearfix">
<li id="menu-item-1036" class="menu-item">4 columns
</li>
<li id="menu-item-1033" class="menu-item">3 columns
</li>
<li id="menu-item-1030" class="menu-item">3 columns w/ sidebar
</li>
<li id="menu-item-1029" class="menu-item">2 columns
</li>
</ul>
</li>
<li id="2col" class="parent menu-item">Ajax
</li>
</ul>
</li>
<li id="menu-item-1727" class="parent menu-item">About
<ul class="clearfix">
<li id="menu-item-870" class="menu-item">Who We Are
</li>
<li id="menu-item-872" class="menu-item">What We Do
</li>
</ul>
</li>
</ul>
</nav>
css:
a {
text-decoration:none;
}
ul {
padding-left:0px;
}
#menu {
position:relative;
border:none;
height:auto;
top:34px;
left:0px;
}
#menu ul {
margin:0;
list-style:none;
}
#menu li {
float:left;
position:relative;
}
#menu > ul > li > a {
padding:25px 26px 17px;
border-bottom:3px solid transparent;
margin-right:1px;
color:#6B6B6B;
font:11px Arial, sans-serif;
font-weight:bold;
text-align:center;
text-transform:uppercase;
display:block;
}
#menu > ul > li:hover > a {
color:#F15A2B;
border-color:#F15A2B;
}
#menu > ul li.selected > a, #menu > ul li.selected:hover > a {
color:#3B3B3B;
border-color:#3B3B3B;
}
/* Submenu (second level) */
#menu li > ul {
position:absolute;
top:auto;
left:0;
width:180px;
max-height:0;
box-shadow:1px 2px 10px rgba(100, 100, 100, 0.3);
visibility: hidden;
z-index:99999;
overflow:hidden;
-webkit-transition: max-height 0.2s ease, visibility 0s linear 0.5s;
-moz-transition: max-height 0.2s ease, visibility 0s linear 0.5s;
-o-transition: max-height 0.2s ease, visibility 0s linear 0.5s;
-ms-transition: max-height 0.2s ease, visibility 0s linear 0.5s;
transition: max-height 0.2s ease, visibility 0s linear 0.5s;
background: inherit !important;
}
#menu ul li:hover > ul {
visibility: visible;
max-height: 216px;
transition-delay: 0s;
}
#menu ul li > ul:hover {
overflow:visible;
}
#menu li > ul li {
height:36px;
width:100%;
border-bottom:1px solid #EEE;
padding-top:0;
}
#menu li > ul li:last-child {
border-bottom:none;
}
#menu li > ul li a {
background:#FFF;
padding:11px 15px;
height:35px;
color:#999;
width:100%;
font:10px Arial, sans-serif;
font-weight:bold;
text-align:left;
text-transform:uppercase;
display:block;
}
#menu li > ul li:hover > a {
color:#FFF;
background:#F15A2B;
}
#menu li > ul li.selected > a, #menu li > ul li.selected:hover > a {
color:#3B3B3B;
background:#FFF;
}
/* Submenu (third level) */
#menu li > ul > li > ul {
position:absolute;
top:0 !important;
left:180px !important;
width:180px;
overflow:hidden;
box-shadow:1px 2px 10px rgba(100, 100, 100, 0.3);
visibility:hidden;
}
#menu li > ul > li:hover > ul {
visibility: visible;
}
#menu li > ul > li > ul > li:last-child {
border-bottom:none;
}
#menu li > ul li ul li a {
background:#FFF;
padding:11px 15px;
height:35px;
color:#999;
font:10px Arial, sans-serif;
font-weight:bold;
text-align:left;
text-transform:uppercase;
display:block;
}
#menu li > ul > li > ul > li:hover > a {
color:#FFF;
background:#F15A2B;
}
#menu li > ul li.selected > a, #menu li > ul li.selected:hover > a {
color:#3B3B3B;
background:#FFF;
}
/* Dark Menu */
#menu.dark_menu li ul li {
border-color:#464646;
}
#menu.dark_menu li ul li a {
background:#3B3B3B;
color:#999;
}
#menu.dark_menu li ul li:hover > a {
color:#FFF;
background:#F15A2B;
}
#menu.dark_menu li ul li.selected > a, #menu.dark_menu li ul li.selected:hover > a {
color:#FFF;
background:#3B3B3B;
}
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
}

Answer 1

It looks like adding the following CSS below fixes your issue. If you want to remove the border on the last item, you have to make sure the element does not extend past its child height which is the only element with the background color.
#menu li > ul li:last-child {
border-bottom:none;
height: 35px;
}