背景がリストと共に拡大する

Question

HTML/CSSで作成したリストに問題があります。

ナビゲーションメニューリストの3番目のボタンは別のリストですが、カーソルをポイントすると、ナビゲーションメニュー全体の下に「背景色」とともにリストが展開されます。そのリストをボタンの下の領域だけに展開するにはどうすればいいですか？

は、ここでは、 '隠れ' に 'オール' 要素のオーバーフロー値を設定して、あなたの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コードのオーダーリスト（ol）のオーバーフローや背景色を削除することができます。オールへ

Answer 2

1. 追加 'clearfix'：

   オール:: { コンテンツの後： ''; display：table; clear：both; }

2. position: relative;をol > liスタイルに追加します。

3. position: absolute; top: 79px; left: 0;~ol > li > ulここで、79pxはお使いのものの高さです。ここで

あなたol>li>ulは次のとおりです。http://codepen.io/g1un/pen/ozkdZV