Javascript 下拉按钮未自定义

我在菜单中添加了一个基本的可点击下拉按钮，但它不能自定义，甚至不能在live网站上显示更改。并且下拉内容不会出现在单独的行中：

以下是我所指内容的截图：

我搜索过与我的问题相关的谷歌，但我搜索到的一切都不起作用。我做错什么了吗

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（e）{
如果（！e.target.matches（'.button'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}

正文{
保证金：0；
填充：0；
边缘顶部：130像素；
溢出x：隐藏；
}
.导航菜单a img{
浮动：左；
左边距：10px；
}
.导航菜单{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：rgba（0,0,0,0.9）；
利润上限：-130px；
}
.导航菜单李{
浮动：左；
}
.导航菜单李a，
.dropbtn{
显示：内联块；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.导航菜单李a：悬停，
.dropdown:悬停.dropbtn{
边框顶部：2个实心#ff0000；
}
.导航菜单li.下拉列表{
显示：内联块；
}
.nav菜单.下拉菜单内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.nav菜单.下拉菜单内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.nav菜单.下拉菜单内容a:悬停{
背景色：#ff0000；
颜色：#fff；
}
.nav菜单.下拉：悬停.下拉内容{
显示：块；
}
.导航菜单李{
浮动：对；
}
导航栏{
溢出：隐藏；
背景色：透明；
字体系列：Arial、Helvetica、无衬线字体；
浮动：对；
右边填充：100px；
}
李纳瓦{
浮动：左；
字体大小：16px；
颜色：#fff；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉菜单{
浮动：左；
溢出：隐藏；
}
.下拉菜单.按钮{
光标：指针；
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
a:悬停，
.下拉菜单：悬停按钮，
.按钮：焦点{
背景色：红色；
}
.下拉菜单内容{
颜色：#fff；
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉菜单内容a{
浮动：左；
颜色：红色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉菜单内容a：悬停{
背景色：#ddd；
}
.表演{
显示：块；
}
.导航栏导航.打开.下拉菜单.按钮{
光标：指针；
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}

标题在这里

您是否尝试过编写更具体的css，如

.navbar-nav .open .dropdown-menu .button {
  cursor: pointer;
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

但是，如果您的意思是它在本地应用，而不是部署到live site上，则可能是由于浏览器的css缓存造成的，在这种情况下，您可以使用缓存破坏，就像在链接css时在url的末尾附加一个查询字符串（唯一）

---

我已经尝试了你的代码&应该没有问题。 我想这是因为你的风格被另一个类覆盖了。您可以使用浏览器检查器进行检查。 在这种情况下，您应该通过使用

来确定css的优先级！重要信息

像这样

.dropdown-menu-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block !important;
  text-align: left;
}

你可以在这里找到更多关于css特性的信息

---

ohh:/，如果您能提供所有代码/html，并复制您目前拥有的内容，将有助于提供更好的答案。目前，它似乎缺少一些html等。您可以使用一个沙盒来提供一个工作示例，就像现在一样尝试上面的方法！查看当前类上是否有重写很重要。例：保证金：0！重要的；这起作用了，但它不起作用，当要将链接放在单独的行上时，您是否检查了浏览器的inspector？是的，我已检查了inspector:，从您的屏幕截图中，我非常确定它已被另一个类覆盖。顺便说一句，猜猜看，你能检查一下inspector中的

.dropdown menu content

或

#myDropdown

吗？它的样式是display:flex还是类似的？也许是容器的风格让链接从线索中走出来：（提供像@Dasith suggestion这样的完整代码将有助于我们提供更准确的答案