Categories Dressing

[r1formetoo]

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*/

For some reason Glenn I just completely missed seeing this post til now. I implemented your thoughts and then a few of mine. I did away with the grey background in the pop up subcat box and went to white. I then added a hover background color that was a lighter blue this time. I like it. One thing I still think it needs is for the subcats to display once your inside them. Take the link below as an example. It's not until you hover over "sport bike stands" that you are reminded you're in the "commercial series" section. I sort of think that perhaps we should have all the subcats displayed without hovering so people are tempted to continue clicking to see the industrial and swivel series and so on. What do you think of this idea?

http://www.examplecart.com/catalog/s...series-c-87_88