Categories Dressing

[gjh42]

r1formetoo - I played with the styling a bit... see what you think of this.

#chcategories ul {/*top category lists*/
    list-style: none;
    background: none;
    border: nono;
    margin: 0 0 0.4em 0;
    padding: 0;
    }

#chcategories ul a {/*top categories*/
    display: block;
    background: #ffffff;
    border: none;
    margin: 0;
    padding: 0 0.4em;
    }

#chcategories ul ul {/*subcategory lists*/
    list-style: none;
    background: #DCDCDC;
    border: none;
    margin: 0 0 0.0em 0; /*WAS 0 0 0.4em 0*/
    padding: 0 0 0 0.0em; /*WAS 0 0 0 1.3em*/
    }

#chcategories ul ul a {/*subcategories*/
    display: block;
    background: #E9EAEA;
    border: none;
    margin: 0;
    padding: 0;
    }

/*change  bullet when a category w/o bg image is open to subs:*/
#chcategories li a.cat-parent-text {
    color: #000000;
    background: #6CbBff;
    font-weight: bold;
    }

/*change  bullet when a category w/o bg image is open to products:*/
#chcategories li a.cat-selected-text {
    color: #000000;
    background: #6CbBff;
    font-weight: bold;
    }
...

/* top category hover effects*/
#chcategories li.cat-top a:hover {
    color: #000000; /*this is the top level cat text color only when hovering*/
    background:  #4C9Bff; /*this is the top level cat background color only when hovering*/
    } 

/* subcategory hover effects*/
#chcategories li li.cat-subs a:hover, #chcategories li li.cat-products a:hover {
    color: #000000; /*this is the 1st subcat text color only when hovering*/
    background: #4C9Bff; /*this is the 1st subcat background color only when hovering*/
    } 

...

#chcategoriesContent {padding: 0.4em 0;}
/*From here to */
#chcategories li>ul {display: none;}

#chcategories li:hover {position: relative;}

#chcategories li:hover>ul {
    display: block;
    position: absolute;
    left: 98%;
    top: 0;
    border: 1px solid #000000;
    z-index: 100;
    width: 98%;
    }	
/*Here came from post 1750 of main support thread*/