ドロップダウンリストと要素間の距離

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

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

から

margin-top: 60px; 

を削除して、あなたのCSS（https://jsfiddle.net/tkpuobpw/）ではCSSファイルに

Answer 2

マージントップを削除してください： "李のULのli A" セレクタから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

を

.hidden{ 
margin-top: 60px; 
} 

を追加します。

ライン：

padding: 0 20px; 

はギャップを作るので、それを減らしてみてください。これがどうなる

希望：

padding: 0 4px;