Need help with this menu drop down under manufactures

did you forget to add any attachment?

yes sorry

Do you see it now?

it depends how you put them there and what the container is now...
it maybe divs with float=left, ot it maybe table with 2-3 columns (left align - center - right align)

need to see what it is first... can you copy and paste the html for whole menu...
or give us a link to see it in action...

Hey this is my companies dev site. Not sure how my boss would feel with me giving it out, because it is password protected. I can give it to you but let me just explain that what you are seeing in the screen shot is basicly it. When you highlight over the tab it shows that drop down and it.

Do you want to see the code? And what is this table align center? That makes sense..

here is the code i have now

<div onmouseover="this.style.backgroundColor='#f6f6f6'" onmouseout="this.style.backgroundColor='#ffffff'" style="background-color: rgb(255, 255, 255);">

<hr style="height:1px; border:none; color:#f7f7f7; background-color:#f7f7f7;">

<div onmouseover="this.getElementsByClassName('manL')[0].style.color = '#33aedf'" ;="" onmouseout="this.getElementsByClassName('manL')[0].style.color = '#333333'">

<p style="padding: 0.2em 0em 0.2em 0em; margin: 0em 0em; line-height: 0; visibility:visible; color: #333333 !important; font-size: 1.29em; margin-left: 0.7em;text-decoration:none !important;">

<a class="manL" style="color: #333333;text-decoration:none !important;font-size:0.84em; font-family: 'Open Sans', sans-serif; text-transform: uppercase; letter-spacing: 0.3px;" href="/store/manufacturers.html">
MANUFACTURERS</a>

</p>

</div>
<div style="padding-right:1.3em;color: #333333 !important; position: initial;z-index: -1000000;box-shadow:0px 6px 0px #f7f7f7;display: table-row-group;">

<div class="container-fluid" style="background-color:#f6f6f6!important;color: #333333 !important;box-shadow:0px 6px 0px #f7f7f7;display: table-row-group;">

<div style="margin-left: -6px;margin-right: -6px;box-sizing: border-box;display: table-header-group;background-color:#f6f6f6 !important;margin-right: 0px;z-index:-100000;color: #333333 !important;box-shadow:0px 6px 0px #f7f7f7;">

<ul style="background-color: #f6f6f6 !important;color:black;margin-right:0px;">

<li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/betaindustries.html">Beta Industries</a></li>  
<li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/bodoni.html">Bodoni</a></li>
<li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/chromix.html">Chromix</a></li>
</ul>


<ul style="background-color: #f6f6f6 !important;">

     <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/colorlogic.html">ColorLogic </a></li>
     <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/efi.html">EFI</a></li>

</ul>

<ul style="background-color: #f6f6f6 !important;">


    <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/enfocus.html">Enfocus</a></li>
    <li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/gatf.html">GATF</a></li>


</ul>




<ul style="background-color: #f6f6f6 !important;">

   <li style="float: left !important; display: inline-flex !important;padding-left:2px;"><a href="/store/manufacturers/gti.html">GTI</a></li>
   <li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/just-normlicht.html">Just Normlicht</a></li>
    <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/onyx-graphics.html">ONYX</a></li>
    <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/pantone.html">PANTONE</a></li>
 
</ul>


<ul style="background-color: #f6f6f6 !important;">

 <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/spoton.html">SpotOn!</a></li>
 <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/techkon.html">Techkon</a></li>
 <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/ugra.html">UGRA</a></li>
 <li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/x-rite.html">X-Rite</a></li>

</ul>

</div>
</div>
</div>
</div>

Does this help?

a bit, yes... need css file as well...
the one that has definitions for "container-fluid"

made a demo

https://jsfiddle.net/umq7g5cg/

put all items into one <ul>..</ul>
need some css to make it better...

Okay Lets resume tomorrow I have to go to sleep. Ill ask my boss if its okay to share more with you! Thank you for the help, what you said gave me some great perspective!  I really appreciate your help. Here is what I came up with for now

so quick? :)

good... now with:

ul li:nth-child(odd){...}
ul li:nth-child(even){...}

Select allOpen in new window

you can add paddings, align text (left/right) to make it look better...
2 column looks good...

Thank you! Here is what i did

<div style="background-color:#f6f6f6 !important;padding-right:1.3em;color: #333333 !important; position: initial;z-index: -1000000;box-shadow:0px 6px 0px #f7f7f7;display: table-row-group;">
<div class="container" style="padding: .7em;background-color:#f6f6f6!important;color: #333333 !important;box-shadow:0px 6px 0px #f7f7f7;display: block;padding: .7em;">
<div style="margin-left: -6px;margin-right: -6px;box-sizing: border-box;display: table-header-group;background-color:#f6f6f6 !important;margin-right: 0px;z-index:-100000;color: #333333 !important;box-shadow:0px 6px 0px #f7f7f7;">
<!-- display: inline-block; display: table-row;-->

<ul class="container" style="background-color: #f6f6f6 !important;color:black;margin-right:0px;">
<table class="container-fluid" style="width:100%">
  <tbody>
  <tr>
    <td><li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/betaindustries.html">Beta Industries</a></li> </td>
   
    <td><li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/bodoni.html">Bodoni</a></li></td>
   
      </tr>

      <tr>
<td><li style="float: left !important; display: inline-flex !important;">
<a href="/store/manufacturers/chromix.html">Chromix</a></li></td>
 <td><li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/colorlogic.html">ColorLogic </a></li></td>
  </tr>
   <tr>
    <td><li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/efi.html">EFI</a></li></td>
    <td> <li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/enfocus.html">Enfocus</a></li></td>
  </tr>
     <tr>
    <td><li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/gatf.html">GATF</a></li>
</td>
    <td><li style="float: left !important; display: inline-flex !important;padding-left:2px;"><a href="/store/manufacturers/gti.html">GTI</a></li></td>
     </tr>
    <tr> <td><li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/just-normlicht.html">Just Normlicht</a></li></td>
     <td><li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/onyx-graphics.html">ONYX</a></li></td>
  </tr>
     <tr>
   
    <td><li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/pantone.html">PANTONE</a></li></td>
    <td><li style="float: left !important; display: inline-flex !important;">
 <a href="/store/manufacturers/spoton.html">SpotOn!</a></li></td>
  </tr>
     <tr>
    <td><li style="float: left !important; display: inline-flex !important;">
 <a href="/store/manufacturers/spoton.html">SpotOn!</a></li></td>
    <td><li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/techkon.html">Techkon</a></li></td>
    </tr>
    <tr><td><li style="float: left !important; display: inline-flex !important;"><a href="/store/manufacturers/ugra.html">UGRA</a></li></td>
   <td><li style="float: left !important; display: inline-flex !important;white-space:nowrap;"><a href="/store/manufacturers/x-rite.html">X-Rite</a></li></td>
     </tr>

</tbody></table>


</ul>

</div>
</div>
</div>


I had to use padding: .7em to fill in the white space because there was a white border around the columns belonging to the div containter above it.

Can I use
ul li:nth-child(odd){...}
ul li:nth-child(even){...}
in side of the ul element, as in inline styling. The css resides with the back end developers and they control everything. Its sort of troublesome to get them to do things, but it can be done. So that is why my boss was insisting that I do everything with inline css...

Thats a great tip by the way!

I basically put the rows into two sections
<td>
<td>
</tr>
<td>
<td>
</tr>

And thank you again, maybe he will be happy with this. I super appreciate your help. Anyway talk tomo!

HEY ! I got it figured out now :) I wasn't able to use your code though I will use it when i can get a hold of the style sheet itself.

I think what you sent me is amazing and I will develop like that in the future! It's les code and more logic and I like it.

Here is what I have done now thank you again !

Is there a way to add you as a friend? Do you have linkden as well ?

Expert advice! Never would have thought of that solution and I now know of this great way to implement CSS! Thanks a million!