Question

在我正在研究的网站部分中，我有一个NAV元素，其中包含三个部分：About，Portfolio，Contact。我试图让它成为当你将鼠标悬停在“投资组合”部分上时，会出现一个下拉菜单，允许您在“编写样本”和“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;
}

我已经达到了这样的程度，当我将鼠标悬停在项目组合列表项上时，您会看到结果列表项“编写样本”和“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以便文本将根据需要流动。

Answer 2

你有正确的想法;下面的HTML中的注释标签用于删除“li”元素之间的空格。

我没有使用display：none，而是使用visibility：hidden来实现S.E.O目的。

即使你使用position：absolute，你也应该使用z-index，这样如果菜单元素与其他内容重叠，就可以点击它们。

.mm,
.sm {
  list-style: none;
}
.mm {
  position: relative;
  margin: 0px;
  padding: 0px;
  background-color: #000;
  border-bottom: 4px solid red;
}
.sm {
  position: absolute;
  z-index: 1;
  visibility: hidden;
  background-color: #000;
  border-width: 0px 4px 4px 4px;
  border-style: solid;
  border-color: red;
}
.mm > li {
  display: inline-block;
}
.mm > li > a {
  display: inline-block;
  padding: 8px;
}
.sm a {
  display: block;
  padding: 8px;
}
.mm > li > a:hover + .sm,
.sm:hover {
  visibility: visible;
}
.mm a {
  text-decoration: none;
  color: #FFF;
}
.mm a:hover {
  text-decoration: underline;
  color: yellow;
}

<nav>
    <ul class="mm">
	    <li><a href="#" title="#">AAA</a></li><!--
        --><li><a href="#" title="#">BBB</a>
            <ul class="sm">
                <li><a href="#" title="#">SUB</a></li><!--
                --><li><a href="#" title="#">SUB</a></li><!--
                --><li><a href="#" title="#">SUB</a></li>
            </ul>
        </li><!--
		--><li><a href="#" title="#">CCC</a>
            <ul class="sm">
                <li><a href="#" title="#">SUB</a></li><!--
                --><li><a href="#" title="#">SUB</a></li><!--
                --><li><a href="#" title="#">SUB</a></li>
            </ul>
        </li>
    </ul>
</nav>

<h1>CSS NAVIGATION</h1>

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

2 个答案: