Question

我似乎无法解决“差距”问题。出现在我的导航标签下方
还有人可以通过下拉导航帮我吗？我需要在SHOP下放3个小标题，在DISCOVER下放2个小标题，在EDGE CLUB下放3个小标题。我对多重＆lt; li>和＆lt; ul＆gt; ！

这是我第一次提前感谢...

＆＃13;

.navigation {
	background-color: #454242;
	text-align:center;
}

ul.menu {
	height: 43px;
	background-color: #454242;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	transition: 1.0s;
	font-family: 'Lato', sans-serif;
	font-weight:400;
	display:inline-block;
	text-align: center;
}

ul.menu li {
	float: left;
	display: inline;
}

ul.menu li a {
	display: inline-block;
	color: #FFFFFF;
	text-align: center;
	padding: 10px 20px;
	text-decoration: none;
	transition: 1.0s;
	font-size: 17px;
	height: 23px;
}

ul.menu li a:hover {
	background-color: #FFFFFF;
	color: black;
}

ul.menu li a:active {
	background-color: #FFFFFF;
	color: black;
}

ul.menu li.icon {
	display:none;
}

@media screen and (max-width: 680px) {	
ul.menu li:not(:first-child){
	display:none;
	margin: auto;
	float: left;
}
	
ul.menu li.icon {
	display: inline;
	float: left;
	position: absolute;
	left: 0px;
	text-align: left;
}
}

@media screen and (max-width: 680px) {
	
ul.menu.responsive li.icon {
	
	float: left;
	position: absolute;
	text-align: left;
	color: black;
}
	
ul.menu.responsive{
	position: relative;
	height: 258px;
	transition: 1.0s;
	width: 100%
}
	
ul.menu.responsive li{
	float: none;
	display: inline;
	
}
	
ul.menu.responsive li a{
	display:block;
	text-align: center;
}	
}

＆＃13;

<div class="navigation col-12">
<ul class="menu">
<li class="icon">
<a href="javascript:void(0);"onClick="dropdownMenu()">&#9776;</a></li>
<li> <a href="test.html">Home</a></li>
<li> <a href="test.html">Eat</a></li>
<li> <a href="test.html">Shop</a></li>
<li> <a href="test.html">Discover</a></li>
<li> <a href="test.html">Edge Club</a></li>
<li> <a href="test.html">Contact</a></li>
</ul>
</div>

<script>
function dropdownMenu() {
	document.getElementsByClassName("menu")[0].classList.toggle("responsive");
}
</script>

＆＃13;

Answer 1

内联元素会自动在其周围应用空间。由于ul-menu定义为inline-block，因此会收到此处理。这个空间是标签下方的间隙。

要删除空格，请将display更改回block，然后您可以使用width和margin:auto将其居中。

对于副标题，您需要嵌套列表并应用类似的样式。 Here's a good example.

Answer 2

您可以为display: inline-flex

设置ul.menu

Answer 3

（1）这是一个JSFiddle：https://jsfiddle.net/51ueowx7/1/

css只有两次更新，以便删除由空格引起的问题

ul.menu{
    display: table;
    margin: auto;
}

可能的欺骗：How to remove the space between inline-block elements?

（2）

我要采取的第一步是移除锚点。考虑到您不希望每次点击都导航到另一个页面，可能会优先分配点击处理程序。

您已经足够熟悉列表以便能够嵌套它们，我相信在这种情况下，一些格式化将非常有用：

<li id="shop">
    <p>Shop</p>
    <ul class="shop-subheadings">
        <li>Subheading 1</li>
        <li>Subheading 2</li>
        <li>Subheading 3</li>
    </ul>
</li>

开始你可能想要：

ul.shop-subheadings{
    display: none;
}

然后您可以添加/使用类|| ID以便分配点击功能。

$("#shop").click(function(){
    $("ul.shop-subheadings").show();
})

这是一个艰难的开始：https://jsfiddle.net/51ueowx7/8/

出现在导航栏和下拉列表中的差距

3 个答案: