Question

这是this solved question的延续正如您所看到的in this fiddle第3级下拉列表正在工作但修复已在下拉列表的底部创建了这个无法解释的单像素透明边框。如果你仔细观察下拉列表和盒子阴影，你可以看到它。

HTML：

<nav id="menu" class="dark_menu">
    <!-- Main Nav Start -->
    <ul id="main-nav" class="clearfix">
        <li id="port" class="parent menu-item"><a href="portfolio.html">Portfolio</a>

            <ul class="clearfix">
                <li id="regular" class="parent menu-item"><a href="#">Regular</a>

                    <ul class="clearfix">
                        <li id="menu-item-1036" class="menu-item"><a href="#">4 columns</a>

                        </li>
                        <li id="menu-item-1033" class="menu-item"><a href="#">3 columns</a>

                        </li>
                        <li id="menu-item-1030" class="menu-item"><a href="#">3 columns w/ sidebar</a>

                        </li>
                        <li id="menu-item-1029" class="menu-item"><a href="#">2 columns</a>

                        </li>
                    </ul>
                </li>
                <li id="2col" class="parent menu-item"><a href="#">Ajax</a>

                </li>
            </ul>
        </li>
        <li id="menu-item-1727" class="parent menu-item"><a href="">About</a>

            <ul class="clearfix">
                <li id="menu-item-870" class="menu-item"><a href="">Who We Are</a>

                </li>
                <li id="menu-item-872" class="menu-item"><a href="">What We Do</a>

                </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

以下添加以下CSS似乎可以解决您的问题。如果要删除最后一项的边框，则必须确保元素不会超出其子高度，这是唯一具有背景颜色的元素。

#menu li > ul li:last-child {
   border-bottom:none;
   height: 35px;
}

下拉导航菜单底部的1个无法解释的透明像素

1 个答案: