我正在尝试创建一个由两部分组成的响应HTML和CSS导航菜单；一些下拉菜单。
我看了很多youtube视频，但似乎找不到导航菜单2部分的响应模板。
导航的顶部有2个下拉菜单和2个标准页面。导航的底部有一个标题、一个徽标和两个下拉菜单。
我已经在下面附上了我的所有代码，但需要一些关于响应标头的帮助。
提前感谢您的帮助。
body {
padding: 0;
margin: 0;
font-size: 15px;
font-family: Avenir;
color: black;
background-color: white;
}
header {
top: 0;
width: 100%;
}
#top-header ul li i {
color: #00a63f;
float: right;
margin-left: 10px;
margin-top: -2.5px;
}
#top-header ul {
list-style-type: none;
font-size: 19px;
margin: 0% 2.5%;
padding: 0;
overflow: hidden;
background-color: white;
}
#top-header li {
float: left;
}
#top-header li a,
.dropbtn {
display: inline-block;
text-align: center;
color: #00a63f;
text-align: center;
padding: 17px;
text-decoration: none;
}
#top-header li a:hover {
background-color: #f1f1f1;
color: black;
}
#top-header li a:hover i {
background-color: #f1f1f1;
color: black;
}
#top-header li.dropdown {
display: inline-block;
}
#top-header .dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 200px;
border: 2px solid #333333;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 1;
}
#top-header .dropdown-content a {
color: #00a63f;
text-align: center;
padding: 12px;
text-decoration: none;
display: block;
text-align: left;
}
#top-header .dropdown:hover .dropbtn {
background-color: #f1f1f1;
color: black;
}
#top-header .dropdown:hover i {
color: black;
}
#top-header .dropdown-content a:hover {
background-color: #f1f1f1;
color: black;
}
#top-header .dropdown:hover .dropdown-content {
display: block;
}
#top-header .dropdown {
text-align: center;
}
/* Main Navagation */
#main-nav ul li i {
color: white;
float: right;
margin-left: 10px;
margin-top: -2.5px;
}
#main-nav ul {
list-style-type: none;
font-size: 20px;
margin: 0% 2.5%;
padding: 0;
float: left;
overflow: hidden;
background-color: #00a63f;
}
#main-nav li {
float: left;
}
#main-nav li a,
#main-nav .dropbtn {
display: inline-block;
text-align: center;
color: white;
padding: 27px;
height: 100%;
text-align: center;
text-decoration: none;
}
#main-nav li a:hover {
background-color: #18bf59;
color: white;
}
#main-nav li a:hover i {
background-color: #18bf59;
color: white;
}
#main-nav li.dropdown {
display: inline-block;
}
#main-nav .dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 200px;
border: 2px solid #333333;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 1;
}
#main-nav .dropdown-content a {
color: #00a63f;
text-align: center;
padding: 15px;
font-size: 18px;
text-decoration: none;
display: block;
text-align: left;
}
#main-nav .dropdown:hover .dropbtn {
background-color: #18bf59;
color: white;
}
#main-nav .dropdown:hover i {
color: white;
}
#main-nav .dropdown-content a:hover {
background-color: #f1f1f1;
color: black;
}
#main-nav .dropdown:hover .dropdown-content {
display: block;
}
#main-nav .dropdown {
text-align: center;
}
/* Top Header */
#top-header {
width: 100%;
border-bottom: 2px solid #333333;
}
#left-top-header {
width: auto;
float: left;
}
#right-top-header {
width: auto;
float: right;
}
/* Bottom Header */
#bottom-header {
width: 100%;
background-color: #00a63f;
border-bottom: 2px solid #333333;
display: inline-block;
}
#top-header ul li i {
color: #00a63f;
float: right;
margin-left: 10px;
margin-top: -2.5px;
}<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<header>
<div id="top-header">
<ul>
<li class="dropdown">
<a class="dropbtn">DROPDOWN 1 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
<div class="dropdown-content">
<a href="#" style="text-align: center;">DROPDOWN ITEM</a>
<a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
</div>
</li>
<li class="dropdown">
<a class="dropbtn">DROPSOWN 2 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
<div class="dropdown-content">
<a href="#" style="text-align: center;">DROPDOWN ITEM</a>
<a href="#" style="text-align: center;">DROPDOWN ITEM</a>
<a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
</div>
</li>
<li><a href="#">ITEM</a></li>
<li><a href="#">ITEM</a></li>
<li style="float: right;"><a href="#">ITEM</a></li>
<li style="float: right;"><a href="#">ITEM</a></li>
</ul>
</div>
<div id="bottom-header" style="margin-bottom: 0%; padding: 0px;">
<a href="index.html" style="float: left; width: 30%; margin: 0px; padding: 0px;">
<h1 style="font-size: 30px; color: white; margin: 20px; padding: 0px; float: left; text-align: center;">WEBSITE NAME</h1>
<img src="Photos/logo.png" style="width: 40px; height: 40px; margin-top: 15px;">
</a>
<nav id="main-nav" style="float: right; width: 70%;">
<ul>
<li class="dropdown">
<a class="dropbtn">DROPDOWN 3 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
<div class="dropdown-content">
<a href="#" style="text-align: center;">DROPDOWN ITEM</a>
<a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
</div>
</li>
<li class="dropdown">
<a class="dropbtn">DROPDOWN 4 <i id="header-down-arrow" class="fa fa-sort-desc"></i></a>
<div class="dropdown-content">
<a href="#" style="text-align: center;">DROPDOWN ITEM</a>
<a href="#" style="text-align: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;">DROPDOWN ITEM</a>
</div>
</li>
</ul>
</nav>
</div>
</header>根据我的理解，你希望图像和网站名称以及下拉列表在移动设备的同一行上。
布局的问题是，伙计，你需要覆盖很多东西1.您使用了带边距的h1标签，其默认显示为块u，必须将其更改为内联块；并且在锚标签上尝试使用
display: flex;
flex-direction: row;
它需要更多的调整，你可以了解媒体查询，它们也可以派上用场。
试着清楚地描述你想要什么。
对于手机来说，这将是一个突破。尝试使用汉堡菜单，你可以在我的github配置文件中查看它。我已经实现了类似的功能。
github项目看看吧。
您必须在@mediaclass 中编写所需的CSS类
@media类如下：
@media screen and (max-width : 1024px)
{
.
/* your css class */
.
}
欲了解更多信息，请查看此链接：
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
我对您的真正建议是使用css媒体查询[https://www.w3schools.com/howto/howto_js_topnav_responsive.asp]如果你想尝试，如果你觉得在这个问题上花了很多时间，可以使用bootstrap来修复导航栏，然后你可以使用自己的css[https://getbootstrap.com/docs/4.0/components/navbar/]
我希望你能帮助