html - 仅使用 CSS 创建下拉列表项菜单

Question

在我正在处理的网站部分中，我有一个包含三个部分的 NAV 元素:关于、投资组合、联系方式。我试图做到这一点，当你将鼠标悬停在“作品集”部分时，会出现一个下拉菜单，允许你在其他两个部分“写作示例”和“Photoshop”之间进行选择。我正在尝试仅使用 CSS 来完成此操作。

这是我的 HTML 部分:

<nav>
            <ul>
                <li>
                    <a href="index.html" >About</a>
                </li>
                <li class="subNav">
                    <a class="selected" >Portfolio</a>
                    <ul>
                        <li><a href="writing_samples.html">Writing Samples</a></li>
                        <li><a href="photoshop.html">Photoshop</a></li>
                    </ul>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>

和 CSS:

nav {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 0;
} 

nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}

nav li {
display: inline-block;
}

nav a {
font-weight: 800;
padding: 15px 10px;
}

nav ul li.subNav ul {
display: none;
} 

nav ul li.subNav:hover ul {
display: block;
}

当我将鼠标悬停在 Portfolio 列表项上时，您会看到生成的列表项“Writing Samples”和“Photoshop”，只是它将这两个元素显示为原始无序列表的一部分，并且将“投资组合”列表项移动到其余元素之上。我希望“Writing Samples”和“Photoshop”垂直显示在“Portfolio”下，但我无法用 CSS 解决这个问题。

Answer 1

这是它的基础:

nav {
  position: absolute;
  padding: 10px 0;
}
nav ul {
  list-style: none;
  ;
  padding: 0;
}
nav > ul > li {
  display: inline-block;
  position: relative;
  border: 1px solid lightgreen;
  /* for demo */
}
nav a {
  font-weight: 800;
  padding: 5px 10px;
  display: block;
}
nav > ul > li.subNav ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  white-space: nowrap;
  background: pink;
}
nav ul li.subNav:hover ul {
  display: block;
}

<nav>
  <ul>
    <li>
      <a href="index.html">About</a>
    </li>
    <li class="subNav">
      <a class="selected">Portfolio</a>
      <ul>
        <li><a href="writing_samples.html">Writing Samples</a>
        </li>
        <li><a href="photoshop.html">Photoshop</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="contact.html">Contact</a>
    </li>
  </ul>
</nav>

父 li 被赋予 position:relative 以提供定位上下文。

子菜单绝对定位，位于父级 li 的底部并左对齐。

请注意，我使用了直接子选择器 > 来仅定位我想要的元素。

然后，由于子菜单太宽而无法包含在父菜单的宽度内，我添加了 white-space:nowrap 以便文本按要求排列。