css - 菜单项之间不需要的透明空间(边框不起作用)

Question

这是我从 CSS Tricks. 得到的纯 CSS 导航栏我一直在绞尽脑汁试图找出是什么导致了下拉菜单中每个元素下方的空白、开放、透明的空间，遍历了每个 CSS 属性，但我无法理解。您可以通过它们看到图像 slider ，我们不希望这样。谁能帮忙？

更明显on the web比fiddle .

这是 HTML:

<nav>
    <ul class="nav"> <!-- Menu from https://css-tricks.com/targetting-menu-elements-submenus-navigation-bar/ -->
        <li><a href="http://www.neoadvent.tech/">Home</a></li>
        <li><a href="../services/index.html">Services</a>
            <ul class="align-left">
                <li><a href="../services/drug-formulation-services.html">Drug Formulation</a></li>
                <li><a href="../services/analytical-and-bioanalytical-services.html">Analytical & Bioanalytical Services</a></li>
                <li><a href="../services/thermal-analysis-by-tga-and-dsc-services.html">Thermal Analysis</a></li>
                <li><a href="../services/custom-synthesis-services.html">Custom Synthesis</a></li>
                <li><a href="../services/pharmacology-and-toxicology-services.html">Pharmacology & Toxicology</a></li>
                <li><a href="../services/regulatory-support-for-fda-filings-for–drugs-and–medical devices-services.html">Regulatory Support for Drugs & Medical Devices</a></li>
                <li><a href="../services/materials-testing-services.html">Materials Testing</a></li>
                <li><a href="../pdfs/catalog_of_chemical_reagents_and_materials.pdf">Catalog of Chemical Reagents & Materials</a></li>
                <li><a href="../services/food-analysis-for-safety-services.html">Food Analysis</a></li>
            </ul>
        </li>
        <li><a href="#">Technologies</a>
            <ul class="align-left">
                <li><a href="../technologies/api-micronization.html">API Micronization</a></li>
                <li><a href="#">Drug Delivery</a>
                    <ul class="align-left">
                        <li><a href="../technologies/drug-delivery/sol-gel-encapsulation.html">Sol-gel Encapsulation</a></li>
                        <li><a href="../technologies/drug-delivery/smart-hydrogels-and-biomaterials.html">Smart Hydrogels and Biomaterials</a></li>
                        <li><a href="../technologies/drug-delivery/electrorheologically-controlled-drug-release.html">Electrorheologically-Controlled Drug Release</a></li>
                        <li><a href="../technologies/drug-delivery/polyphosphazenes.html">Polyphosphazenes</a></li>
                    </ul>
                <li><a href="#">Materials Science</a>
                    <ul class="align-left">
                    <li><a href="../technologies/materials-science/coatings.html">Coatings</a></li>
                    <li><a href="../technologies/materials-science/structural-materials.html">Structural Materials</a></li>
                    <li><a href="../technologies/materials-science/viscosity-control-in-non-aqueous-systems.html">Viscosity Control: Non-aqueous Systems</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="../services/api-storage.html">Bio-Pharma Storage</a></li>
        <li><a href="../about-us/index.html">About Us</a></li>
        <li><a href="../news/index.html">News</a></li>
        <li><a href="../about-us/contact.html">Contact</a></li>
    </ul>
</nav>

还有 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;
}

删除右边距 :-)