Html 导航菜单将其列表下拉到浮动图像下方，而不仅仅是其自身下方

我有一个导航菜单，它在移动响应模式下从左浮动的徽标下方下拉列表。这可能是由于徽标的浮动属性造成的。如何使下拉菜单显示在菜单按钮的正下方。点击小提琴上的菜单查看

HTML代码-

<div id="header">
<img src="http://www.operadevelopers.com/images/logo.png" class="logo" />
<div id="social">
<a href="https://www.wikipedia.org" class="icon-button wikipedia"><i class="fa fa-wikipedia-w" aria-hidden="true"></i></a>
<a href="https://www.linkedin.com" class="icon-button linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#" class="icon-button google-plus"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a href="#" class="icon-button twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</div>
<!--Navigation Bar-->
<nav>
<label for="show-menu" class="show-menu">Menu &#x2630;</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Whats New</a>
<ul class="hidden">
<li><a href="#">Just Launched</a></li>
<li><a href="#">Launching Soon</a></li>
<li><a href="#">Completed Projects</a></li>
</ul>
</li>
<li><a href="#">Referral</a></li>
<li><a href="#">Buyers Section</a>
<ul class="hidden">
<li><a href="#">EMI Calculator</a></li>
<li><a href="#">Apply For Loan</a></li>
<li><a href="#">Make an Enquiry</a></li>
</ul>
</li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

---

您已将

nav ul li

设置为

float:left，所以如果您将其更改为
float:right像这样：


#标题{
背景：黑色；
宽度：100%；
高度：210px；
最小高度：100%；
}
.标志{
浮动：左；
左：5%；
填充顶部：25px；
}
.图标按钮{
颜色：白色；
边界：0px；
显示：内联块；
字体大小：1.0rem；
线高：1.7雷姆；
保证金：1px；
文本对齐：居中；
宽度：1.7雷姆；
边缘顶部：60像素；
浮动：对；
溢出：隐藏；
}
.脸谱网{
背景色：#3B5998；
}
.推特{
背景色：#4099ff；
}
.谷歌+{
背景色：#db5a3c；
}
.linkedin{
背景色：#007fb1；
}
.维基百科{
背景色：白色；
溢出：隐藏；
颜色：黑色；
右边距：100px；
}
.图标按钮：悬停{
背景色：rgba（165219,89,1）；
过渡：1s；
变换：旋转（360度）；
}
导航ul{
列表样式类型：无；
边缘顶部：170px；
填充：0；
位置：绝对位置；
宽度：100%；
z指数：20000；
}
李国荣{
显示：内联块；
浮动：对；
宽度：14.2857%；/*非-calc（）浏览器的回退*/
宽度：计算（100%/7）；
}
海军ulli a{
显示：块；
最小宽度：140px；
高度：40px；
文本对齐：居中；
线高：40px；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
颜色：#fff；
背景：#161616；
文字装饰：无；
}
nav ul li:悬停a{
颜色：rgb（165219,89）；
}
导航ulli：悬停ula{
颜色：#fff；
高度：40px；
线高：40px；
}
导航ul li:悬停ul a:悬停{
颜色：rgb（165219,89）；
}
nav ul li ul{
边际上限：0px；
显示：无；
}
李国荣{
显示：块；
浮动：无；
宽度：200px；
}
纳瓦尔利利亚酒店{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
导航ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
.显示菜单{
浮动：对；
宽度：70px；
高度：25px；
边缘顶部：90像素；
右边距：-100px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：蓝色；
文本对齐：居中；
显示：无；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]：选中~#菜单{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：760像素）{
.标志{
左：10%；
}
.图标按钮{
字体大小：0.8rem；
线高：1.5雷姆；
宽度：1.5雷姆；
边缘顶部：60像素；
}
.维基百科{
保证金权利：7%；
}
导航ul{
位置：相对位置；
边际上限：0；
浮动：对；
显示：无；
}
nav ul li，li a{
宽度：90%；
}
nav ul li ul{
边际上限：0px；
显示：块；
}
李国荣{
宽度：90%；
}
.显示菜单{
显示：块；
}

菜单☰；





















我只能快速查看您的代码，但我认为您的菜单按钮始终位于同一位置

因此，您可以在css中添加边距顶部标记

#menu {
   margin-top: -37px;
}

在我的电脑上，这很好用。但你必须在移动设备上试用。
试试下面的代码，我认为这对你有帮助


#标题{
背景：黑色；
宽度：100%；
高度：210px；
最小高度：100%；
}
.标志{
浮动：左；
左：5%；
填充顶部：25px；
}
.图标按钮{
颜色：白色；
边界：0px；
显示：内联块；
字体大小：1.0rem；
线高：1.7雷姆；
保证金：1px；
文本对齐：居中；
宽度：1.7雷姆；
边缘顶部：60像素；
浮动：对；
溢出：隐藏；
}
.脸谱网{
背景色：#3B5998；
}
.推特{
背景色：#4099ff；
}
.谷歌+{
背景色：#db5a3c；
}
.linkedin{
背景色：#007fb1；
}
.维基百科{
背景色：白色；
溢出：隐藏；
颜色：黑色；
右边距：100px；
}
.图标按钮：悬停{
背景色：rgba（165219,89,1）；
过渡：1s；
变换：旋转（360度）；
}
导航ul{
列表样式类型：无；
边缘顶部：170px；
填充：0；
位置：绝对位置；
宽度：75%；
z指数：20000；
}
李国荣{
显示：内联块；
浮动：左；
宽度：14.2857%；/*非-calc（）浏览器的回退*/
宽度：计算（100%/7）；
}
海军ulli a{
显示：块；
最小宽度：140px；
高度：40px；
文本对齐：居中；
线高：40px；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
颜色：#fff；
背景：#161616；
文字装饰：无；
}
nav ul li:悬停a{
颜色：rgb（165219,89）；
}
导航ulli：悬停ula{
颜色：#fff；
高度：40px；
线高：40px；
}
导航ul li:悬停ul a:悬停{
颜色：rgb（165219,89）；
}
nav ul li ul{
边际上限：0px；
显示：无；
}
李国荣{
显示：块；
浮动：无；
宽度：200px；
}
纳瓦尔利利亚酒店{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
导航ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
.显示菜单{
浮动：对；
宽度：70px；
高度：25px；
边缘顶部：90像素；
右边距：-100px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：蓝色；
文本对齐：居中；
显示：无；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]：选中~#菜单{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：760像素）{
.标志{
左：10%；
}
.图标按钮{
字体大小：0.8rem；
线高：1.5雷姆；
宽度：1.5雷姆；
边缘顶部：60像素；
}
.维基百科{
保证金权利：7%；
}
导航ul{
位置：相对位置；
边际上限：0；
浮动：对；
显示：无；
}
nav ul li，li a{
宽度：90%；
}
nav ul li ul{
边际上限：0px；
显示：块；
}
李国荣{
宽度：90%；
}
.显示菜单{
显示：块；
}
na
#menu {
   margin-top: -37px;
}