Question

当我将鼠标悬停在菜单项上时，它们并不总是完全适合导航栏，我也无法修复边框和上一个导航项之间的微小间隙，当我放大/缩小时，间隙会发生变化页面，当我放大/缩小谷歌浏览器并将鼠标悬停在菜单项上时，悬停的项目会比栏的其余部分更高。我现在已经试图解决这个问题很长一段时间了。感谢您的帮助。

主要目标：摆脱＆＃34;联系＆＃34;旁边的差距，使悬停的项目适合导航栏，修复谷歌浏览器导航栏缩放问题。

这是我的代码：http://codepen.io/anon/pen/QbBgKR

<nav class="menu">

        <ul class="clearfix">

            <li><a  href="#">HOME</a> </li>

            <li><a  href="#">PROFILE</a></li>

            <li><a  href="#">STUFF</a></li>

            <li><a href="#">STUFF</a></li>

            <li id="long"> <a href="#">PRODUCTS<span class="arrow">&#9660;</span></a> 

                <ul class="sub-menu">

                    <li><a href="#">STUFF1</a></li>

                    <li><a href="#">STUFF2</a></li>

                    <li><a href="#">STUFF3</a></li>

                </ul>

            </li>

            <li><a href="#">CONTACT</a></li>

        </ul>

    </nav><!-- menu -->

    .clearfix:after {

    display: block;
    clear: both;

}

.clearfix {

    margin-left: -37px;

}

nav {

    font-size: 1em;
    width: 700px;
    background-color: #3A5199;
    font-family: Verdana;
}

#current {

    background-color: #6082ec; 

}



.menu li {

    display: inline-block;
    list-style: none;
    position: relative;
    width: 15.2%;
    text-align: center;
    margin-left: -0.4%;
    margin-right: -0.4%;

}


.menu li:hover {

    background-color: #6082ec;

}

.menu a {

    text-decoration: none;
    color: white;
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
}



#long {

    width: 24%;

}

.menu .arrow {

    font-size: 12px;
    line-height: 0%;

}

.sub-menu {

    width: 128px;
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: opacity linear 0.15s;
    background-color : #6082ec;


}

.menu li:hover .sub-menu {

    z-index:1;
    opacity:1;

}

.sub-menu li:hover {

    background-color: #3A5199;

}

.sub-menu li {

    width: 131%;
    display: block;
    right: 39.2px;


}

.sub-menu a {

    position: relative;
    text-align: center;    

}

Answer 1

UL的负利润正在发挥作用。

.clearfix {

  margin-left: -37px;
  margin-right:-0.4%;

}

这是一个奇怪的数学她 - imho。

Answer 2

使用reset stylesheet或类似normalize.css之类的东西，可以在各种浏览器中对抗各种边距，填充和显示不一致性，并且您不必做负余量＆＃34; hacks＆＃34; 就像你为.clearfix所做的那样。

虽然您已正确计算了li的百分比，但加起来却达到了100％，但是联系右侧的差距会随着您的百分比宽度的像素舍入而出现。已经应用了。

15.2% of 700px = 106.4px

浏览器可能会向下舍入到106px。缩放时间隙的变化也可能与宽度百分比有关。在一个缩放级别，值的舍入方式不同。

106px * 5 = 530px + 24% of 700px (168px) = 698px

由于您在<nav>元素上使用固定的，为什么不在li使用固定宽度？或者稍微改变百分比值。主页链接的15.2％在文本 Home 和li的左右边缘之间创建了比 Profile 更多的填充。

固定宽度解决方案

/* default width for all li */
.menu li {
    width: 108px;
}
/* Home */
.menu li:nth-child(1) {
    width: 100px;
}
/* Products */
.menu li:nth-child(5) {
    width: 168px;
}

至于放大Chrome并在悬停时获得高度变化，我无法复制该问题。

导航栏项目移动

2 个答案: