Unwanted see-though spaces between menu items (border not working) - css

Question

This is a pure CSS navbar I got from CSS Tricks. I've been racking my brain trying to figure out what's causing the blank, open, see-through space below each item on the drop-down menu, going over every CSS property, but I can't get it. You can see the image slider through them, and we don't want that. Can anyone help?
It's more obvious on the web than in the fiddle.
Here's the HTML:
<nav>
<ul class="nav"> <!-- Menu from https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/ -->
<li>Home</li>
<li>Services
<ul class="align-left">
<li>Drug Formulation</li>
<li>Analytical & Bioanalytical Services</li>
<li>Thermal Analysis</li>
<li>Custom Synthesis</li>
<li>Pharmacology & Toxicology</li>
<li>Regulatory Support for Drugs & Medical Devices</li>
<li>Materials Testing</li>
<li>Catalog of Chemical Reagents & Materials</li>
<li>Food Analysis</li>
</ul>
</li>
<li>Technologies
<ul class="align-left">
<li>API Micronization</li>
<li>Drug Delivery
<ul class="align-left">
<li>Sol-gel Encapsulation</li>
<li>Smart Hydrogels and Biomaterials</li>
<li>Electrorheologically-Controlled Drug Release</li>
<li>Polyphosphazenes</li>
</ul>
<li>Materials Science
<ul class="align-left">
<li>Coatings</li>
<li>Structural Materials</li>
<li>Viscosity Control: Non-aqueous Systems</li>
</ul>
</li>
</ul>
</li>
<li>Bio-Pharma Storage</li>
<li>About Us</li>
<li>News</li>
<li>Contact</li>
</ul>
</nav>
And the CSS:
nav {
display: block;
width:100%;
text-align: center;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav a {
display: block;
background-color: #003399;
color: white;
text-decoration: none;
padding: .5em 1.4em .7em;
font-size: 75%;
letter-spacing: 1px;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
border-radius: 6px;
}
.nav li { position: relative; }
.nav > li {
float: left;
border-bottom: 4px #aaa solid;
margin-right: 1px;
}
.nav > li > a {
margin-bottom: 1px;
}
.nav > li:hover, .nav > li:hover >a { border-bottom-color: #99ddff; }
.nav li:hover > a { color: #99ddff; }
.nav > li:first-child { border-radius: 4px 0 0 4px; }
.nav > li:first-child>a { border-radius: 4px 0 0 0; }
.nav > li:last-child {
border-radius: 0 0 4px 0;
margin-right: 0;
}
.nav > li:last-child >a { border-radius: 0 4px 0 0; }
.nav li li a { margin-top: 1px }
.nav li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 5px solid transparent;
top: 50%;
right: 5px;
}
/* submenu positioning*/
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid #99ddff;
z-index: 1;
left: -99999em;
}
.nav > li:hover > ul {
left: auto;
padding-top: 5px;
min-width: 100%;
}
.nav > li li ul { border-left: 1px solid #fff; }
.nav > li li:hover > ul {
/* margin-left: 1px */
left: 100%;
top: -1px;
}
/* arrow hover styling */
.nav > li > a:first-child:nth-last-child(2):before { border-top-color: white; }
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-bottom-color: orange;
margin-top: -5px
}
.nav li li > a:first-child:nth-last-child(2):before {
border-left-color: #aaa;
margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
border-right-color: orange;
right: 10px;
}
.align-left { text-align: left; }

Answer 1

.nav > li {
float: left;
border-bottom: 4px #aaa solid;
margin-right: 1px;
}
remove the margin-right :-)