Lparker Lparker - 7 months ago 10
HTML Question

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.

Answer

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/