2部分响应式HTML&；带有下拉菜单的CSS导航

我试图创建一个响应HTML和CSS导航菜单，包含两部分&一些下拉菜单

我看过很多youtube视频，但似乎找不到导航菜单2部分的响应模板

导航的顶部有2个下拉菜单和2个标准页面。导航的底部有一个标题、一个徽标和两个下拉菜单

我在下面附上了我所有的代码，但是需要一些关于响应标题的帮助

提前感谢您的帮助

正文{
填充：0；
保证金：0；
字体大小：15px；
字体系列：Avenir；
颜色：黑色；
背景色：白色；
}
标题{
排名：0；
宽度：100%；
}
#顶部标题ulli i{
颜色：#00a63f；
浮动：对；
左边距：10px；
利润上限：-2.5px；
}
#上割台ul{
列表样式类型：无；
字号：19px；
利润率：0%2.5%；
填充：0；
溢出：隐藏；
背景色：白色；
}
#上头球李{
浮动：左；
}
#上头球李a，
.dropbtn{
显示：内联块；
文本对齐：居中；
颜色：#00a63f；
文本对齐：居中；
填充：17px；
文字装饰：无；
}
#上头球李a：悬停{
背景色：#f1f1；
颜色：黑色；
}
#上头球李a：悬停i{
背景色：#f1f1；
颜色：黑色；
}
#顶部标题li.下拉列表{
显示：内联块；
}
#顶部标题。下拉内容{
显示：无；
位置：绝对位置；
背景色：白色；
最小宽度：200px；
边框：2px实心#333333；
边框左下半径：5px；
边框右下半径：5px；
z指数：1；
}
#顶部标题。下拉式内容a{
颜色：#00a63f；
文本对齐：居中；
填充：12px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
#顶部标题。下拉列表：悬停。下拉列表{
背景色：#f1f1；
颜色：黑色；
}
#顶部标题。下拉列表：悬停i{
颜色：黑色；
}
#顶部标题。下拉内容a：悬停{
背景色：#f1f1；
颜色：黑色；
}
#顶部标题。下拉：悬停。下拉内容{
显示：块；
}
#顶部标题。下拉列表{
文本对齐：居中；
}
/*主导航*/
#主导航ulli i{
颜色：白色；
浮动：对；
左边距：10px；
利润上限：-2.5px；
}
#主导航{
列表样式类型：无；
字体大小：20px；
利润率：0%2.5%；
填充：0；
浮动：左；
溢出：隐藏；
背景色：#00a63f；
}
#主导航李{
浮动：左；
}
#主导航李a，
#主导航落差{
显示：内联块；
文本对齐：居中；
颜色：白色；
填充：27px；
身高：100%；
文本对齐：居中；
文字装饰：无；
}
#主导航李a：悬停{
背景色：#18bf59；
颜色：白色；
}
#主导航李a：悬停i{
背景色：#18bf59；
颜色：白色；
}
#主导航li.下拉列表{
显示：内联块；
}
#主导航下拉列表内容{
显示：无；
位置：绝对位置；
背景色：白色；
最小宽度：200px；
边框：2px实心#333333；
边框左下半径：5px；
边框右下半径：5px；
z指数：1；
}
#主导航下拉菜单内容a{
颜色：#00a63f；
文本对齐：居中；
填充：15px；
字号：18px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
#主导航下拉菜单：悬停下拉菜单{
背景色：#18bf59；
颜色：白色；
}
#主导航下拉菜单：悬停i{
颜色：白色；
}
#主导航下拉菜单内容a：悬停{
背景色：#f1f1；
颜色：黑色；
}
#主导航下拉菜单：悬停。下拉菜单内容{
显示：块；
}
#主导航下拉菜单{
文本对齐：居中；
}
/*上割台*/
#上割台{
宽度：100%；
边框底部：2个实心#333333；
}
#左上割台{
宽度：自动；
浮动：左；
}
#右上割台{
宽度：自动；
浮动：对；
}
/*底部集管*/
#底部集管{
宽度：100%；
背景色：#00a63f；
边框底部：2个实心#333333；
显示：内联块；
}
#顶部标题ulli i{
颜色：#00a63f；
浮动：对；
左边距：10px；
利润上限：-2.5px；
}

从多少我可以理解你想要的图像和网站名称和下拉列表在同一行的手机

你的布局的问题是，伙计，你需要覆盖很多东西 1.您使用了带边距的h1标记，其默认显示为block u，必须将其更改为inline block；在锚定标签上尝试使用

   display: flex;
   flex-direction: row;

这将需要更多的调整，你可以了解媒体查询，他们也可以派上用场

试着给你想要的东西一个清晰的图像

对于手机，这将打破尝试使用汉堡包菜单，您可以在我的github配置文件中查看它，我已经实现了类似的功能

---

看看吧

您必须在

@media

类中编写CSS类，使其具有响应性

@media

类是这样的：

@media screen and (max-width : 1024px)
{
.
/* your css class */
.
}

有关详细信息，请查看此链接：

---

我给你的真正建议是使用css媒体查询[]，如果你想尝试，并且如果你觉得在这个问题上花费了太多时间，请使用bootstrap来修复导航栏，然后你可以使用自己的css[

---

我希望你能在某些方面有所帮助，它响应悬停。你还希望它如何响应？最好的方法是在1024px下，制作一个默认隐藏的汉堡包菜单。新的布局应该包括位于网站名称之前的汉堡包菜单中的所有菜单，或者浮动到右侧（取决于你的品味）-例如