仅使用CSS创建下拉列表项菜单 [英] Creating a dropdown list item menu with CSS only

问题描述

在我正在处理的网站部分中，我有一个NAV元素，该元素包含三个部分:关于"，投资组合"，联系方式".我试图做到这一点，以便当您将鼠标悬停在投资组合"部分上时，会出现一个下拉菜单，允许您在其他两个部分(书写样本"和"Photoshop")之间进行选择.我试图仅使用CSS来完成此操作.

In a section of website I'm working on I have a NAV element that contains three sections: About, Portfolio, Contact. I'm trying to make it so that when you hover over the Portfolio section, a drop down appears allowing you to choose between two other sections, "Writing Samples" and "Photoshop." I am trying to accomplish this using only CSS.

这是我的HTML部分:

This is my HTML section:

<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;
}

我已经理解到，当我将鼠标悬停在项目组合"列表项上时，您会看到结果列表项"Writing Samples"和"Photoshop"，除了它将这两项显示为原始无序列表的一部分之外，并且将投资组合"列表项移到其余项的上方.我希望书写示例"和"Photoshop"垂直出现在投资组合"下，但是我无法用CSS弄清楚这一点.

I have reached the point that when I hover over the Portfolio list item, you see the resulting list items "Writing Samples" and "Photoshop", except that it displays these two items as a part of the original unordered list, and moves the "Portfolio" list item above the rest of the items. I would like "Writing Samples" and "Photoshop" to appear vertically under "Portfolio", but I can't quite figure this out with CSS.

推荐答案

这是它的基础:

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以提供定位上下文.

The parent li is given position:relative to provide positioning context.

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

The submenu is positioned absolutely, at the bottom of the parent li and aligned left.

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

Note that I have used the direct child selector > to target only the elements I want to.

然后，由于子菜单太宽而无法包含在父级的宽度之内，所以我添加了white-space:nowrap，以便文本可以按要求流动.

Then, since the submenu is too wide to be contained within the parent's width, I added white-space:nowrap so that the text will flow as required.

这篇关于仅使用CSS创建下拉列表项菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！