Hi,
I need some help getting my styling right with this mod.
Biggest issue is with the sub-cats. When they show up, the borders are not long enough on either sides and the name of the cats are not centered at all - they favor the top portion of the space. Also when they come up, they are about halfway up the 'block' of the main cats.
The main cats are ok, but I would like them to be more centered in their blocks, they favor the top. Also for 'Gift Catalog, when you hover the mouse over it, the bottom border disappears!
I guess the best thing I can do is to give a link to my site, so that you can see what I'm saying: http://www.a u t o m o t i v e a c e.com. The site is currently down for maint' don't worry about that.
Also here is the css, I have made some changes (in an attempt to custom style it!) which have comments by them:
Code:
body {
behavior: url(includes/csshover.htc);
}
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/
/*blue*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #005599/*ffffff*/!important;background:#eeeeee/*005599 6C99D9 116eb9*/;text-decoration:underline/*added*/;}
/*red
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/
/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
#dropMenuWrapper {
width:100%;
height:42px;/*25px*/
margin:0;
font-size:9px;/*11px*/
/*background-color: #eeeeee;/*added*/
}
div#dropMenu { /*width of top level categories across the top*/
width:100%;/*750px*/
margin:0 auto;
text-align:;/*center*/
z-index:1000;
position:relative;
}
div#dropMenu ul {
margin:0;
padding:0;
}
div#dropMenu li {
position: relative;
list-style: none;
margin: 0;
float: left;
line-height:1em;/*1em adjusts the height of the menu items*/
width:10%;/*added*/
*width:9.8%;/*added*/
}
div#dropMenu ul.level1 {
width:100%;/*750px*/
margin:0 auto;
text-align:center;/*center*/
background:#eeeeee;/*4f4f4f 005599*/
height:38px;/*25px adjusts the height of the color*/
z-index:1000;
border-top:2px solid #00008b;/*added 005599*/
border-bottom:2px solid #00008b;/*added 005599*/
}
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 5px/*25px*/;text-decoration: none; text-transform:uppercase; color:#005599/*ffffff*/; text-align:center/*center*/; border-right:1px solid #005599/*ffffff*/; border-left:1px solid #005599/*added ffffff*/; border-bottom: 0px solid #005599/*added*/;height:26px/*added*/;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #116eb9/*ccc*/; width:13em/*13*/;padding:4px 0/*added*/;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#eeeeee/*4f4f4f 005599*/;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#eeeeee/*4f4f4f 005599*/;}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color:#005599/*white ffffff*/; text-transform:none;} /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f/*005599*/;}
Any help is greatly appreciated!
Bookmarks