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

尝试删除边距顶部：60px来自＆＃34; li ul li a＆＃34;选择器。

Answer 3

尝试：

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

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

这将消除项目之间的间距，但仍保留下拉列表中第一个元素的margin-top。

Answer 4

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

该行：

padding: 0 20px;

填补空白，所以尽量减少它。

希望这样做：

padding: 0 4px;

下拉列表和导航元素之间的距离

4 个答案: