açılır liste ve neb üzerindeki öğe arasındaki mesafe

Question

Solda bir resim ve sağda bazı öğeler içeren bir menü oluşturuyorum. Bir öğenin bir alt menüsü (bir açılır menü) vardır ve bu menüdeki öğeler aralarında çok uzaktır. Bunu nasıl düzeltebilirim? Herhangi bir fikri olan var mı? teşekkür ederim!

Kodu jsfiddle üzerinde css ile bağladım, teşekkürler!

https://jsfiddle.net/tkpuobpw/

Answer 1

(https://jsfiddle.net/tkpuobpw/)

margin-top: 60px; 

den

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

kaldırmak ve css olarak sizin css dosyası

Answer 2

<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> 

margin-top kaldırmayı deneyin: "li ul li a" seçiciden 60px.

Answer 3

Dene:

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

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

Bu öğeler arasındaki boşluğu ortadan kaldırmak ama hala açılan ilk öğeye margin-top tutacak.

Answer 4

için

.hidden{ 
margin-top: 60px; 
} 

ekleyin:

hattı:

padding: 0 20px; 

boşluğu yapar, bu yüzden azaltmayı deneyin.

Umut bunu yapacak:

padding: 0 4px;