下拉列表和導航元素之間的距離

Question

我正在創建一個菜單，其左側是一張圖片，右側是一些項目。一個項目有一個子菜單（一個下拉菜單），這個菜單中的項目在它們之間相距太遠。我該如何解決它？任何人有任何想法？謝謝！

我把代碼與jsfiddle上的css鏈接，謝謝！

<nav> 
<label for="show-menu" class="show-menu">Menu</label> 
<input type="checkbox" id="show-menu" role="button" > 
<ul id="menu"> 
<li style="float: left; text-align: left;"><img src="/img/logo_desktop.png" alt="logo Scapin Case SRL www.scapincase.com"/> 
<li><a href="#">Home</a></li> 
<li><a href="#">Proposte Immobiliari</a> 
<ul class="hidden"> 
<li><a href="#">Residence Le Stelle</a></li> 
<li><a href="#">Residence Le Vele</a></li> 
<li><a href="#">Residence De Nicola</a></li> 
</ul>  
</li> 
<li> <a href="#">Interni</a></li> 
<li><a href="#">Chi Siamo</a></li> 
<li><a href="#">Contatti</a></li> 
</ul> 
</nav> 

https://jsfiddle.net/tkpuobpw/

Answer 1

刪除

margin-top: 60px; 

從

li ul li a { 
width: auto; 
min-width: 10px; 
margin-top: 60px; 
padding: 0 20px; 
} 

，並添加

.hidden{ 
margin-top: 60px; 
} 

到你的CSS文件

Answer 2

嘗試取出邊距：從 「裏UL立一個」 選擇60PX。

Answer 3

嘗試：

li ul li:first-child a { 
    margin-top: 60px; 
} 

li ul li a { 
    width: auto; 
    min-width: 10px; 
    padding: 0 20px; 
} 

這將消除物品之間的間距，但保持邊距下拉仍是第一要素上。

Answer 4

在你的CSS（https://jsfiddle.net/tkpuobpw/）：

行：

padding: 0 20px; 

使得差距，所以儘量減少它。

希望這會做：

padding: 0 4px;