HTML CSS 菜单 - 无法使子菜单内容全宽

Question

我已经尝试了很长时间，但我无法在菜单项 4 和 5 中使下拉内容全宽。菜单项 2 和 3 对我来说效果很好，但 4 和 5 中的图像不会在菜单下方居中，而只会固定到相应的菜单项。我希望 "view all" 按钮居中显示所有 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 上，您需要调整结果 window 以显示完整菜单。

这是我第一次从头开始编写网站代码，所以我不确定代码的整个结构是否有问题，或者是否只需要对 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/

HTML CSS 菜单 - 无法使子菜单内容全宽

HTML CSS Menu - can't make submenu content full width

html

css

menu

submenu