CSS阻止无法使用jekyll下拉导航栏

Question

我一直在关注w3schools和this other website使用frontmatter在jekyll中构建一个导航栏。我在CSS中遇到块属性问题。除了下拉部分之外的整个导航栏都在工作。

这是jsfiddle。我不确定它有多么有用，因为它里面有液体。

这是我正在看的内容的图片。我已经玩过CSS的“#navbar .ddm a”部分了，所以我知道我在正确的位置，但是如果我放块也没关系。内联工作正常。它只是默认为内联块，即使我删除“display：”

这是我认为应该是罪魁祸首的CSS

#navbar .ddm a {
  color: green;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

Answer 1

需要定位的元素是下拉菜单的列表项（li）。 您关注的是嵌套锚标记（a）。所以你需要向上看一级 - 在包含父元素（li）。

为了达到预期的结果，您需要删除仅在 上声明的float下拉列表项例如

#navbar .dropdown-menu li { 
float: none; 
}

只要您声明了float规则，将元素与display规则对齐就不会有效。

小提琴演示 https://jsfiddle.net/kbuoL6sm/3/（包括其他样式）