Search code examples
htmlcssmenusubmenu

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

I've been trying for ages but I'm unable to make the drop down content in Menu Items 4 & 5 full width. Menu items 2 & 3 are working perfectly for me but the images within 4 & 5 won't centre under the menu, instead only pinning to the corresponding menu item. I want all 4 images to be visible with the "view all" button centred.

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

Here's the full code I'm working with: https://jsfiddle.net/Lparker77/h5ek2wpm/2/

On the fiddle you need to adjust the result window to show the full menu.

It's my first time coding a website from scratch so I'm unsure whether the whole structure of the code is the problem or whether it'll take just a few tweaks to the CSS.

Any help or advice is appreciated.

Solution

  • Update your ID values to 'totwsilversbar1' (menu 4) and 'totwsilversbar2' (menu 5), respectively.

    And change your css as follows:

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