Display: table-cell absolute positioning query

Question

I am building a drop-down menu for wordpress, and i've come across an interesting dilemna. Initialy i had a drop down when you hovered "shop" that would display all categories, and from their highlighting categories would bring up 5 random products in a div underneath that would span the whole width of the menu bar. This worked fine

However, the client at the time decided he needed much more categories than what were there, and aptly i had to break them down into subcategories.

The menu currently works like this:

Hover shop -> show main categories Hover categories -> show sub-categories.

This part works absolutely fine; however the list to show the subcategories is laid out using css table settings in order to keep the sub-categories list spread evenly across the size of the menu. You can see an example of what i mean here .

Previously, i didn't use the css table settings, as the menu fit just fine. The drop down div that contained the categories products worked just fine. Now that they are within the css table markup though, even though they are not defined as being so, seem to be "pretending" to be table-cells. Every drop down of the products is being placed to the right of each subcategory as a blank space. But because they are set to spread evenly, it makes it look very odd.

So i have two questions: Firstly; despite displaying absolutely, the drop down products section is -not- going where i need it to go. Is there a way to break these out of the table layout?

Secondly, if not, what other options do i have to make these categories display evenly across the parent div no matter how many subcategories i have? An option i considered was working out the width percentage needed using javascript and then applying that straight to the li's, however i'm not sure how viable that is.

$args = array(

     'taxonomy'     => $taxonomy,
     'orderby'      => $orderby,
     'show_count'   => $show_count,
     'pad_counts'   => $pad_counts,
     'hierarchical' => $hierarchical,
     'title_li'     => $title,
     'hide_empty'   => $empty
);
$all_categories = get_categories( $args );
$categorycounter == 0;
foreach ($all_categories as $cat) {
if($cat->category_parent == 0) {
    $categorycounter = $categorycounter + 1;
    $categorypadding = "";
    $category_id = $cat->term_id;       
    echo $categorypadding . '<li class="category-' . $categorycounter.  '"><a class="main-nav-link" href="'. get_term_link($cat->slug, 'product_cat') .'">'. $cat->name .'</a><div class="drop-down-'. $cat->name .'"><section class="drop-down-section"><section class="sub-list">';
// set up subcategories to display below main categories

              $IDbyNAME = get_term_by('name', $cat->name, 'product_cat');

              $product_cat_ID = $IDbyNAME->term_id;
                    $args4 = array(
                   'hierarchical' => 1,
                   'show_option_none' => '',
                   'hide_empty' => 0,
                   'parent' => $product_cat_ID,
                   'taxonomy' => 'product_cat',     
                    'posts_per_page' => -1
              );            

            $subcategoryloop = get_categories( $args4 );        
            $subcount = 0;
            foreach ($subcategoryloop as $sc){
            if($subcategoryloop){
                $subcount = $subcount + 1;
            $link = get_term_link( $sc->slug, $sc->taxonomy);
            echo '<a class="subme" href="' . $link . '">'. $sc->name .'</a><section class="drop-down-products">';


                                //set up subcategories to display products   

                                        $args2 = array(
                                        'posts_per_page' => -1,
                                        'product_cat' => $sc->slug,
                                        'post_type'=>'product',
                                         'orderby' => 'rand'
                                  );    

                                $productcount = 0;
                                $loop = new WP_Query( $args2 );

                                while ( $loop->have_posts() ) : $loop->the_post();

                                            $productcount = $productcount + 1;
                                            if($productcount < 6){
                                            echo "<section class='thumbcontainer'><p><a href='";
                                            the_permalink();
                                            echo "'>" ;
                                            the_title();
                                            $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
                                                echo "</a></p><img src='" . $feat_image . "'/><br/><p class='dropdown-price'>";
                                                $price = get_post_meta( get_the_ID(), '_regular_price', true);
                                                echo "&pound;" .$price;
                                                echo "</p></section>";



                                            }
                                endwhile;

            echo "<section><a class='view-more' href='". get_term_link($cat->slug, 'product_cat') ."'>View More Products</a></section></section>";


            }
            }
echo "</section></section></div></li>";

 }
 }

As a side note, i know my code is messy. Sorry!

Answer 1

To justify the list, add:

.sub-list {
  display: table;
  table-layout: fixed;
}

.subme {
  width: 100%;
}