jquery - 第一个 child 在 CSS 菜单中移动

Question

我已经申请了a Tutorial制作水平菜单，但我不知道为什么第一个(小) child 不与其他 child 在同一条线上..

这是一个 preview

<nav>

    <ul class="menu">
                <li id="home"><a href="#home" class="homeIcon">Acceuil</a></li>
                <li id="Bureau"><a href="#bureau">Bureau</a></li>
                <li id="actualites"><a href="#Act">Actualités</a></li>
                <li id="partenaires"><a href="#part">Partenaires</a></li>
                <li id="contact"><a href="#contact">Contact</a></li>
                <li id="Liens"><a href="#liens">Liens utiles</a></li>
                <li id="Liens"><a href="#liens">lien+subtitles</a>
                    <ul class="sousmenu">
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                        <li id="Liens"><a href="#liens">Liens utiles</a></li>
                    </ul>
                </li>
    </ul>
</nav>

CSS:

.menu{

margin:0 auto;
padding:0;
list-style-type:none;
display:table;
position:relative;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
margin-bottom: 50px;
white-space: nowrap;
}

.menu  > li{
/* Specifying a fallback color and we define CSS3 gradients for the major browsers: */


background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);

border-right: 1px solid rgba(9, 9, 9, 0.125);

/* Adding a 1px inset highlight for a more polished efect: */

box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-moz-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
-webkit-box-shadow: 1px -1px 0 rgba(255, 255, 255, 0.6) inset;
position:relative;
display:inline-block;

list-style: none;

}

.menu >li +li {

width:200px;
text-align:center;
}
.menu li:after{


content:'.';
text-indent:-9999px;
overflow:hidden;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
z-index:1;
opacity:0;

/* Gradients! */

background-image:-webkit-gradient(linear, left top, right top,  from(rgba(168,168,168,0.5)),color-stop(0.5,rgba(168,168,168,0)), to(rgba(168,168,168,0.5)));
background-image:-moz-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-o-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:-ms-linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));
background-image:linear-gradient(left, rgba(168,168,168,0.5), rgba(168,168,168,0) 50%, rgba(168,168,168,0.5));


box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff,1px 0 0 #a3a3a3,2px 0 0 #fff;


-moz-transition:0.25s all;
-webkit-transition:0.25s all;
-o-transition:0.25s all;
transition:0.25s all;
}

.menu li:first-child{
border-radius: 4px 0 0 4px;
}

.menu li:first-child:after,
.menu li.selected:first-child:after{
box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-moz-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;
-webkit-box-shadow:1px 0 0 #a3a3a3,2px 0 0 #fff;

border-radius:4px 0 0 4px;
}

.menu li:last-child{
border-radius: 0 4px 4px 0;
}


.menu li:last-child:after,
.menu li.selected:last-child:after{
box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-moz-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;
-webkit-box-shadow:-1px 0 0 #a3a3a3,-2px 0 0 #fff;

border-radius:0 4px 4px 0;
}

.menu li:hover:after,
.menu li.selected:after,
.menu li:target:after{

opacity:1;
}

.menu:hover li.selected:after,
.menu:hover li:target:after{
opacity:0;
}

.menu li.selected:hover:after,
.menu li:target:hover:after{
opacity:1 !important;
}

.menu li a{
color: #5d5d5d;
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-weight:bold;
padding: 12px 35px 14px;
position: relative;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6);
z-index:2;
text-decoration:none !important;

}

.menu a.homeIcon{
background:url('img/rsz_home-icon.png') no-repeat center center;
overflow: hidden;
padding-left: 12px;
padding-right: 12px;
text-indent: -9999px;
width: 5%;

}
.sousmenu {
text-decoration:none;
list-style: none;
position:absolute;
visibility:hidden;
padding:0;
}
.menu  li:hover .sousmenu{
visibility:visible;
 }
.sousmenu li {

position:relative;
width:200px;
background-color: #f0f0f0;
background-image: -webkit-gradient(linear,left top, left bottom,from(#fefefe), color-stop(0.5,#f0f0f0), color-stop(0.51, #e6e6e6));
background-image: -moz-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -o-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: -ms-linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
background-image: linear-gradient(#fefefe 0%, #f0f0f0 50%, #e6e6e6 51%);
  border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

谢谢你的帮助，抱歉我的英语不好

Answer 1

这是由于 overflow:hidden; 您添加到 .homeIcon 链接的属性，它也显示在 inline-block 中.将 overflow 属性设置为 visible 以外的任何值都会更改内联 block 元素的基线；见Why is this inline-block element pushed downward?

解决方案是要么不使用 overflow:hidden(没有 9999px 宽的屏幕，因此这看起来是一个可行的选项)，要么设置 baseline 属性将列表项和链接到底部，例如此处:https://jsfiddle.net/Mazala/5xo5L3xL/