Question

我已经尝试了很长时间，但是我无法在菜单项4＆amp;中找到下拉内容。 5全宽。菜单项2＆amp; 3对我来说很完美，但4＆amp; 5不会在菜单下居中，而只是固定到相应的菜单项。我希望所有4张图像都可以通过＆＃34;查看全部＆＃34;按钮居中。

<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进行一些调整。< / p>

感谢任何帮助或建议。

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/

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

1 个答案: