仅使用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;
}

我的意思是，当我将鼠标悬停在“项目组合”列表项上时，您会看到结果列表项“ Writing Samples”和“ Photoshop”，只是它将这两项显示为原始无序列表的一部分，然后将“项目组合”列表项，位于其余项目的上方。 我希望“书写示例”和“ Photoshop”垂直出现在“投资组合”下，但是我无法用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，而是出于SEO的目的使用了visible：hidden。

即使您使用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>