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

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”元素之间的空格。

而不是使用显示：无，我使用可见性：为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"> 
 
\t  <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><!-- 
 
\t \t --><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>