CSS trickery and a Joomla Virtuemart Horizontal Menu

I was trying to achieve something like this.

It caused a fair bit of head scratching, checking modules and finally some CSS trickery to get it to look right.

So I thought I'd blog my results for you, incase it helps someone save some time ;)


In the end the joomla module I used was mod_vm_prod_cat_full but instead of hacking the code to display the whole menu horizontally ( which I tried but perfecting the code wasn't as straight forward as I was hoping it'd be ) I used the module a number of times for each of the vertical lists I wanted to make.

The next thing I need to do was add a background and I also wanted to make the Category title a different colour to the other links. For these things I needed to use some CSS trickery, which saved me hacking the code once again ;)

.level1, .level0 {
list-style-type: none;
}


td.promo1 div.module div div div ul.level0 li a:link, td.promo3 div.module div div div ul.level0 li a:link, td.promo5 div.module div div div ul.level0 li a:link {
font-weight: bold ;
color: #fff ;

}

td.promo1 div.module div div div ul.level0 li ul.level1 li a:link, td.promo3 div.module div div div ul.level0 li ul.level1 li a:link, td.promo5 div.module div div div ul.level0 li ul.level1 li a:link {
font-weight: normal !important;
color: #333 !important;
}


AND THE CSS FOR THE CONTAINING DIVS ->>>>>

#promo{
margin: 10px 10px;
font-size: 11px;
}
#promo .inside{
padding-left: 10px;
padding-right: 10px;

background: url("../images/categories_bg.gif") repeat-x top;

}


.promo1, .promo2, .promo3, .promo4, .promo5, .promo6 {
padding:0 5px 0 0;
width: 150px;
vertical-align: top;
}