HTML CSSメニュー - サブメニューのコンテンツを全幅にすることはできません

Question

私は年齢を問わず試してきましたが、メニュー項目4の内容をドロップダウンすることはできません4 & 5全幅。メニュー項目2 & 3は完全に機能していますが、4 & 5内の画像はメニューの中央に表示されず、対応するメニュー項目に固定されます。 「すべて見る」ボタンを中央にして、4つの画像をすべて表示したい。あなたはフルメニューを表示するには、結果ウィンドウを調整する必要がフィドルでhttps://jsfiddle.net/Lparker77/h5ek2wpm/2/

：

<ul id="nav"> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 1</a></li> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 2</a> 
    <div class="dropdown-content"> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
    </div> 
    </li> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 3</a> 
    <div class="dropdown-content"> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
     <a href="#">Submenu Item</a> 
    </div> 
    </li> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 4</a> 
    <div class="dropdown-bar"> 
     <div id="totwsilversbar"> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     </div> 
     <div class="viewallbutton">VIEW ALL</div> 
    </div> 
    </li> 
    <li class="dropdown"><a class="dropbtn" href="">Menu Item 5</a> 
    <div class="dropdown-bar"> 
     <div id="totwsilversbar"> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     <img id="thumbnail" src=""> 
     </div> 
     <div class="viewallbutton">VIEW ALL</div> 
    </div> 
    </li> 
</ul> 

ここで私が働いている完全なコードです。

最初からウェブサイトをコーディングしているので、コード全体の構造が問題になっているのか、それともCSSに微妙な調整があるのか​​は不明です。

何か助けやアドバイスをいただければ幸いです。

Answer 1

あなたのID値を 'totwsilversbar1'（メニュー4）と 'totwsilversbar2'（メニュー5）にそれぞれ更新してください。

そして、次のようにあなたのCSSを変更：

#totwsilversbar1 { 
width: 100% !important; 
height: 210px !important; 
position: relative !important; 
left: -705px;} 

#totwsilversbar2 { 
width: 100% !important; 
height: 210px !important; 
position: relative !important; 
left: -940px;} 

JSフィドル：https://jsfiddle.net/h5ek2wpm/10/