使用CSS創建下拉列表項目菜單

在我正在研究的網站部分中，我有一個NAV元素，其中包含三個部分：About，Portfolio，Contact。我試圖做到這一點，當您將鼠標懸停在投資組合部分時，會出現一個下拉菜單，您可以在兩個其他部分中選擇「編寫樣本」和「Photoshop」。我試圖用CSS來完成這個任務。使用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來弄清楚。

來源

2016-03-03 dsideb

這是它的基本功能：

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，以便文本將根據需要進行流動。

來源

2016-03-03 21:32:20

你有正確的想法;下面的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>

來源

2016-03-03 22:54:21 SomeGuy

使用CSS創建下拉列表項目菜單

回答

相關問題