下拉导航菜单出现在右侧并水平堆叠

Question

我正在尝试为导航栏中的一项创建下拉菜单。我的代码基于 this W3Schools example。悬停时，菜单出现在导航栏下方（应该如此），但它 1) 水平堆叠而不是垂直堆叠 2) 出现在页面的最右侧。我在这里看过类似的问题，但无法找出我的代码中的问题。任何帮助将不胜感激。

/* nav */

nav {
  display: flex;
  flex-wrap: wrap;
  padding: .25rem 0;
  color: #ffffff;
  font: 30px 'Roboto', sans-serif;
  margin: auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}

nav a {
  display: block;
  margin: 0 40px;
}


/* dropdown container */

.dropdown {
  float: none;
  position: relative;
  overflow: visibile;
}


/* dropdown button */

.dropdown .dropbtn {
  display: flex;
  font-size: 30px;
  border: none;
  outline: none;
  color: #ffffff;
  padding: inherit;
  background-color: inherit;
  font-family: inherit;
  margin: auto;
}


/* dropdown content (hidden by default */

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 10px;
  background-color: #ffffff;
  width: 250px;
  left: calc(50% - 125px);
}

.dropdown-content>a {
  color: black;
  text-align: left;
  border-bottom: 1px solid #009EDB;
}


/* show dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
  float: left;
  margin: 0;
}

<nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">
                        Work
                    </button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>

Answer 1

您的下拉菜单由锚点（链接、<a> 标签）构成，它们自然是内联元素。这意味着这些元素自然地作为页面或行流的一部分定位。为了使它们看起来垂直，您需要将它们更改为“块”元素，您可以通过将 display: block 添加到下拉列表 a 元素的样式来使用它们：

nav a {
  margin: 0 40px;
  display: block;
}

此特定元素中已存在 'margin'。

我还从您的样式中删除了所有“!important”，因为这是不好的做法，根本没有帮助。由于您缺少背景，我将触发元素的样式重新设置为具有红色文本，因此它看起来不像是随机的白色 space 触发了下拉菜单。

也就是说，我没有看到下拉菜单有任何“样式极右”的行为。菜单直接显示在触发元素下方（有 40px 的边距，如果你有一个真的小屏幕可能会让它看起来非常右。）

/* nav */
nav {
    display: flex;
    flex-wrap: wrap;
    padding: .25rem 0;
    color: #ffffff;
    font: 30px 'Roboto', sans-serif;
    margin: auto;
    justify-content: center;
    overflow: hidden;
}

nav a {
    margin: 0 40px;
    display: block;
}

/* dropdown container */
.dropdown {
    float: none;
    overflow: hidden;
}

/* dropdown button */
.dropdown .dropbtn {
    display: flex;
    font-size: 30px;
    border: none;
    outline: none;
    color: red;
    padding: inherit;
    background-color: inherit;
    font-family: inherit;
    margin: auto;
}

/* dropdown content (hidden by default */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: inherit;
    width: 100%;
}

/* show dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

<nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">Work</button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>

Answer 2

问题 1 已通过冷冻豌豆的罗迪答案解决。

对于第 2 个问题：您希望将下拉内容的中心相对于其父项对齐。为此，您希望将 dropdown-content 向左移动其宽度的一半，然后将其稍微向右移动下拉菜单宽度的一半。下拉元素也需要相对定位，否则下拉内容将相对于文档定位。要使下拉内容可见，您需要使下拉菜单和导航栏溢出可见。

nav {
    overflow: visible;
}

.dropdown {
    position: relative;
    overflow: visible;
}

.dropdown-content {
    position: absolute;
    width: 250px;
    left: calc(50% - 125px);
}

这样做的原因是您通过指定 left: -125px 将下拉内容的中心与下拉内容的左侧对齐，因为您将其向左移动了下拉内容宽度的一半。然后要将其与下拉菜单的中心对齐，您需要添加 50%，因为它是绝对定位的，因此将使用父级宽度作为参考，父级宽度的 50% 是父级中心。

下拉导航菜单出现在右侧并水平堆叠

Dropdown Nav Menu Appears on Right and Stacked Horizontally

html

css

nav