menu coloring and spacing
-
Hi everyone, just two quick questions as I’m still not fully fluent in CSS to know which sections I need to be tweaking 🙂
I’ve been recoloring the menu so that the current (selected) category is highlighted along with any subcategories. Problem is, as soon as I mouse over a subcategory within the menu, the parent category is no longer highlighted. I’d like to keep that entire category/subcat structure highlighted.
The other question I have is regarding spacing between menu items. There are so many padding/margin options in the header code that I’m not quite sure which one I need to be fiddling with. I just want to space the menu items out a bit more across the page.
If I’ve confused anyone, I apologize – I can always provide a screenshot if needed. Thanks in advance!
header code:
/*nav links*/ #header ul li { float:left;white-space:nowrap;} #header ul li a {float:left;display:block;color:#444;padding:5px 0 5px 10px;} #header ul li:first-child a {padding-left:0;} #header ul li a:focus, #header ul li a:hover, #header ul li a:active, #header ul .current_page_item a, #header ul .current_page_ancestor a{background:#dddddd;text-decoration:none;}, body.home #header ul li.home a, #header ul .current-cat a, #header ul .current-cat-parent a, body.category-blog #header ul .blog a {text-decoration:none;} body.shopping_cart #header ul .current_page_item a {text-decoration:none;} /*search || Page Navi*/ .searchWrap, .page_navi {overflow:hidden;} #searchform, .page_navi ul {float:right;} #searchform input {float:left;padding:2px;} #s {width:213px;margin:0 6px 0 0;} #searchFind {margin:0;} .page_navi ul li a {font-size:0.9em;} /*LR Navi*/ #header .LR_navi {padding:10px 0;} #header .LR_navi a {font-size:0.9em;padding-top:10px;} /*Main Category Navi || Hybrid navi*/ #header .main_navi {clear:both;float:left;padding-top:10px;} #header .hybrid_navi ul {float:left;} #header .hybrid_navi ul.categories, #header .hybrid_navi ul.pages {margin-left:10px;} /*Secondary Navi*/ #header .secondary_navi {padding-top:10px;} /*Hybrid Navigation Drop Downs*/ #header .hybrid_dropnavi ul {position:relative;}/*for IE7*/ #header .hybrid_dropnavi ul, #header .hybrid_dropnavi ul ul {z-index:900;} #header .hybrid_dropnavi ul li {position:relative;} #header .hybrid_dropnavi ul li.drop #header .hybrid_dropnavi ul li a {padding:5px 10px;} #header .hybrid_dropnavi ul li:first-child a {padding-left:0;} #header .hybrid_dropnavi ul ul {position:absolute;display:none;top:20px;left:0;background:#dddddd;float:none;} #header .hybrid_dropnavi ul ul li, #header .hybrid_dropnavi ul ul li a {text-align:left;display:block;float:none;border:0 none;} #header .hybrid_dropnavi ul ul li a, #header .hybrid_dropnavi ul li:first-child ul a, #header .hybrid_dropnavi ul ul li:first-child a {;padding:10px;text-decoration:none;} #header .hybrid_dropnavi ul ul li a:focus, #header .hybrid_dropnavi ul ul li a:hover {background:#d2d2d2;text-decoration:none;}
The topic ‘menu coloring and spacing’ is closed to new replies.