Javascript 响应导航栏-韩元'；不要在Drupal上正确地折叠和时髦

我创建了一个响应迅速的导航栏。我有两个问题。1） 当我缩小测试页面上的屏幕时，所有链接都不会隐藏。2） 当我将代码插入Drupal时，它将嵌套的链接放在不同的基线上。它在测试页面上不会这样做。我想不出一个方法来创建没有按钮的响应条…可能是因为我是一个初学者

下面是这两个问题和代码的截图

正文{margin:0；字体系列：Helvetica}
/*向顶部导航添加背景色*/
托普纳夫先生{
溢出：隐藏；
背景色：#486D87；
}
/*设置导航栏内链接的样式*/
.topnav a{
浮动：左；
显示：块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
字号：17px；
}
.主动{
背景色：#555；
颜色：白色；
}
/*隐藏应在小屏幕上打开和关闭topnav的链接*/
.topnav.icon{
显示：无；
}
/*下拉列表容器-需要定位下拉列表内容*/
.下拉列表{
浮动：左；
溢出：隐藏；
}
/*设置下拉按钮的样式以适合topnav内部*/
.下拉菜单{
字号：17px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
/*设置下拉内容的样式（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*设置下拉列表中链接的样式*/
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
/*在topnav链接和悬停按钮上添加背景色*/
.topnav a:悬停，.dropdown:悬停.dropbtn{
背景色：#BE6A14；
颜色：白色；
}
/*为悬停时的下拉链接添加背景色*/
.下拉列表内容a：悬停{
背景色：#BE6A14；
颜色：黑色；
}
/*当用户将鼠标移动到下拉按钮上时，显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*当屏幕宽度小于600像素时，隐藏除第一个（“主页”）外的所有链接。显示包含打开和关闭topnav（.icon）的链接*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav a:不是（：第一个孩子），.dropdown.dropbtn{
显示：无；
}
.topnav a.icon{
浮动：对；
显示：块；
}
}
/*当用户单击图标时，“responsive”类将通过JavaScript添加到topnav中。该类使topnav在小屏幕上看起来不错（垂直显示链接，而不是水平显示链接）*/
@媒体屏幕和屏幕（最大宽度：600px）{
.topnav.responsive{位置：相对；}
.topnav.a.图标{
位置：绝对位置；
右：0；
排名：0；
}
.topnav.a{
浮动：无；
显示：块；
文本对齐：左对齐；
}
.topnav.responsive.dropdown{float:none；}
.topnav.responsive.下拉列表内容{位置：相对；}
.topnav.responsive.dropdown.dropbtn{
显示：块；
宽度：100%；
文本对齐：左对齐；
}
}
关于我们
签名第一
小方书。
礼品
/*当用户单击图标时，在向topnav添加和删除“响应”类之间切换*/
函数myFunction（）{
var x=document.getElementById（“myTopnav”）；
如果（x.className==“topnav”）{
x、 类名+=“响应”；
}否则{
x、 className=“topnav”；
}
}

您的代码看起来很好，只需在媒体查询中隐藏按钮元素即可

将其插入css

@media screen and (max-width: 600px) {
/*Hide button elements*/
.topnav button, 
.topnav a:not(:first-child) 
{display: none;}

---

也许这将解决您的用例：

css的变化：

.topnav {
  overflow: hidden;
  background-color: #486D87;
  display: flex;
  justify-content: space-between;
}

---

你想在较小的屏幕上隐藏整个蓝色导航条吗？不，我想保留蓝色导航条并隐藏除“主页”之外的所有链接。修复了它…缺少一些代码。很抱歉文本基线仍然存在问题。可能需要问我们的网站领主（我们和drupal之间的中间人…）你能更新代码吗，我可以调查这个问题。更新。非常感谢。不，那没用。我想这是我使用的样式表。我因为另一个原因更改了样式表，并注意到问题已经解决，但是我的下拉列表无法工作。不知道如何让他们使用不同的样式表。