HTML CSS菜單-無法使子菜單內容全角

Question

我已經嘗試了很長時間，但無法使菜單項4和5中的下拉內容變為全角。 菜單項2和3對我來說效果很好，但4和5中的圖像不會在菜單下居中，而是僅固定到相應的菜單項。 我希望所有4張圖片在“查看全部”按鈕居中的情況下可見。

<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>

這是我正在使用的完整代碼： https : //jsfiddle.net/Lparker77/h5ek2wpm/2/

在小提琴上，您需要調整結果窗口以顯示完整菜單。

這是我第一次從頭開始編寫網站，所以我不確定代碼的整體結構是否有問題，或者是否只需要對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/