背景隨列表一起展開

Question

我的HTML/CSS列表出現問題。

我的導航菜單列表中的第三個按鈕是另一個列表，但是當我將光標指向它時，列表隨同整個導航菜單下的「背景色」一起展開。如何使該列表只展開按鈕下方的區域？

這裏是我的CSS代碼

ol { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    background-color: #1a1a1a; 
 
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 
 
    font-size: 20px; 
 
} 
 
ol a { 
 
    display: block; 
 
} 
 
ol > li { 
 
    float: left; 
 
    width: 15%; 
 
} 
 
ol li a { 
 
    background-color: #1a1a1a; 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 10px 15px 15px 15px; 
 
} 
 
ol li a:hover { 
 
    background-color: #111; 
 
} 
 
ol > li > ul { 
 
    display: none; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
ol > li:hover > ul { 
 
    display: block; 
 
} 
 
ol > li > ul > li { 
 
    position: relative; 
 
}

<ol> 
 
    <li><a href="index.html"> &#9745; Strona główna</a> 
 
    </li> 
 
    <li><a href="index.html"> &#9745; Muzyka</a> 
 
    </li> 
 
    <li><a href="index.html"> &#9745; Streetwear</a> 
 
    <ul> 
 
     <li><a href="index.html">Ubrania</a> 
 
     </li> 
 
     <li><a href="index.html">Buty</a> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="index.html"> &#9745; Wideo</a> 
 
    </li> 
 
    <li><a href="index.html"> &#9745; Lifestyle</a> 
 
    </li> 
 
    <li><a href="index.html"> &#9745; O nas</a> 
 
    </li> 
 
</ol>

Answer 1

在你的CSS代碼的一部分，你 '醇' 元素的溢出值設置爲 '隱藏'。溢出：隱藏的元素將嘗試包裝他們的子元素，即使通常他們不會。

在這種情況下，由於此屬性，您的有序列表中的所有內容都被包裹在其中。

爲了解決這個問題，你可以在你的CSS代碼刪除有序列表（OL）的溢出或背景顏色。

Answer 2

1. 添加 'clearfix''01：

   醇:: {後內容 ： ''; display：table; 明確：均; }

2. 將position: relative;添加到您的ol > li風格;

3. add position: absolute; top: 79px; left: 0; to ol > li > ul其中79px是你ol的高度。

這裏是你的ol>li>ul：http://codepen.io/g1un/pen/ozkdZV