第一個孩子得到移入CSS菜單

Question

我已經申請a Tutorial做一個橫向菜單，但我不知道爲什麼第一個（小的）孩子不與放置在同一行獲得..

這裏有一個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

這是由於您添加到.homeIcon鏈接，這也顯示在inline-block的overflow:hidden;財產。將溢出屬性設置爲除visible之外的任何內容都會更改內嵌塊元素的基線;看到Why is this inline-block element pushed downward?

的解決方法是不使用overflow:hidden（無屏是9999px寬，因此這看起來像一個可行的選擇），或者將連結和列表項的baseline屬性設置爲bottom，如這裏：https://jsfiddle.net/Mazala/5xo5L3xL/

Answer 2

試試這個：

.menu >li +li { 
    width: 200px; 
    text-align: center; 
    height: 100%; 
} 

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