Dropdown-Liste und Abstand zwischen Element auf nav

Question

Ich erstelle ein Menü mit einem Bild auf der linken Seite und einige Elemente auf der rechten Seite. Ein Element hat ein Untermenü (ein Dropdown-Menü) und die Elemente in diesem Menü sind zu weit voneinander entfernt. Wie kann ich es reparieren? Hat jemand irgendwelche Ideen? Danke!

Ich verknüpfe den Code mit CSS auf jsfiddle, danke!

<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

entfernen

margin-top: 60px; 

von

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

und

.hidden{ 
margin-top: 60px; 
} 

auf Ihre CSS-Datei

Answer 2

Versuchen Sie, die margin-top Entfernung: 60px von dem Wähler "li ul li a".

Answer 3

Versuche:

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

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

Dieser Abstand zwischen den Elementen eliminieren, sondern die margin-top auf dem ersten Elemente in der Dropdown-Liste noch halten.

Answer 4

in Ihrem CSS (https://jsfiddle.net/tkpuobpw/) hinzufügen:

Die Linie:

padding: 0 20px; 

macht die Lücke, so versuchen Sie es zu reduzieren.

hoffen, dass dies tun:

padding: 0 4px;