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/

在 fiddle 上，您需要调整结果窗口以显示完整菜单。

这是我第一次从头开始编写网站代码，所以我不确定是代码的整个结构有问题，还是只需要对 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 fiddle :https://jsfiddle.net/h5ek2wpm/10/