水平菜單與下拉菜單中斷

Question

我有一個水平的社交媒體菜單，當懸停時有兩個選項。 菜單在懸停狀態之外完全對齊，但是當項目懸停時，水平對齊會中斷。我想知道如何做到這一點，以便下拉項目顯示在父項目下面而不破壞水平對齊？

fiddle

HTML/PHP的

<div class="social"> 
     <ul> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="instagram" /></a> 
       <ul> 
        <li><a href="#">cait</a></li> 
        <li><a href="#">shannon</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="youtube" /></a> 
       <ul> 
        <li><a href="#">cait</a></li> 
        <li><a href="#">shannon</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="facebook" /></a> 
       <ul> 
        <li><a href="#">cait</a></li> 
        <li><a href="#">shannon</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="twitter" /></a> 
       <ul> 
        <li><a href="#">cait</a></li> 
        <li><a href="#">shannon</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/pinterest.png" alt="lockerz" /></a> 
       <ul> 
        <li><a href="#">cait</a></li> 
        <li><a href="#">shannon</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div><!-- end social --> 

CSS-

#header .social { 
    float: right; 
    list-style: none; 
    padding-top: 20px; 
} 

#header .social ul li { 
    display: inline; 
    position: relative; 
} 

#header .social ul li:hover { 
    display: block; 
    position: relative; 
} 

#header .social ul li ul { 
    display: none; 
} 

#header .social ul li a { 
    display: inline; 
    padding-left: 6px; 
    white-space: nowrap; 
} 

#header .social ul li:hover ul { 
    display: block; 
    position: relative; 
} 

#header .social ul li:hover li { 
    float: none; 
} 

Answer 1

有兩件事情需要加以修正：

（1）你是給你李display:inline開始然後display: block懸停，這就是爲什麼你的水平路線正在打破。擺脫LI的懸停狀態並將其顯示設置爲inline-block。 （2）您爲您提供了嵌入式UL position:relative，因此當它顯示它仍在頁面的流程中並增加了父LI的寬度時。改爲給它position:absolute（並將其填充設置爲0）。

你的CSS應該是這樣的：

#header .social { 
float: right; 
list-style: none; 
    padding-top: 20px; 
} 

#header .social ul { 
    position: relative; 
} 

#header .social ul li { 
    display: inline-block; 
} 

#header .social ul li ul { 
    display: none; 
    padding: 0; 
} 

#header .social ul li a { 
    display: inline; 
    padding-left: 6px; 
    white-space: nowrap; 
} 

#header .social ul li:hover ul { 
    display: block; 
    position: absolute; 
} 

Demo