Need help customizing sub menus...
3.5.1
I want to customize my submenus and sub sub menus on my category menus without disturbing the parent menu. Is there a way to do this? I am currently using this in my CSS Inserts... but cannot find a way to change submenus without it affecting the parent. #menu2 { border: solid 1px #4D5232 !important; background: url(/wp-content/themes/atahualpa351/images/sidebarbg04.jpg) repeat top left; box-shadow: 0 0 10px #333; -moz-box-shadow: 0 0 10px #333; -moz-border-radius:5px; -khtml-border-radius: 5px; -webkit-border-radius:5px;border-radius: 5px; } div#menu2 ul.rMenu { background-color: transparent; } div#menu2 ul.rMenu li { background-color: transparent; } div#menu2 ul.rMenu li.current_page_item a:link, div#menu2 ul.rMenu li.current_page_item a:active, div#menu2 ul.rMenu li.current_page_item a:hover, div#menu2 ul.rMenu li.current_page_item a:visited, div#menu2 ul.rMenu li:hover { background: url(/wp-content/themes/atahualpa351/images/sidebarbg04.jpg) repeat top left; } div#menu2 ul.rMenu li a:hover, div#menu2 ul.rMenu li.sfhover { background: url(/wp-content/themes/atahualpa351/images/sidebarbg04.jpg) repeat top left; } #menu2 .rMenu-hor a { font-weight: bold !important; } |
This where Firebug comes in. I just used it to determine the selector for the submenu which is
HTML Code:
.rMenu-expand li a |
I want to customize the sub menus and the sub,sub menus without disturbing the parent menu including border, background, -moz, etc. I placed:
#menu2 .rMenu-expand li a { * * background: url(/wp-content/themes/atahualpa351/images/sidebarbg04.jpg) repeat top left; } Not sure what that was suppose to do but it did nothing. What am I doing wrong? |
What are the two asterisks before background for? Do you have a link to your site?
|
Hey Larry, I got it... Still playing with it. I would like to create a little more space top and bottom on the submenus since I added some -moz shadow. Take a look... http://www.theblogfarm.com/
Here's the code so far: #menu2 .rMenu-expand li a { border: solid 0px #4D5232 !important; background-color: transparent; box-shadow: 0 0 10px #333; -moz-border: solid 1px #4D5232; -moz-box-shadow: 0 0 10px #333; -moz-border-radius:3px; -khtml-border-radius: 3px; -webkit-border-radius:3px; border-radius: 3px; } |
I would probably add a margin-bottom to that code with !important added.
|
Margin worked great... I have one last thing I cannot figure out. The submenu hover background is set the way I want it but it affects the parent hover as well. Is there any way to have the submenu background change on hover, without it showing up on the parent?
|
You have the background for the hover set for an image. Set it for transparent instead.
|
I have the image on the hover, which I want. It is the background behind the submenu's I would like to make transparent. Check it out... You see the boxes in the submenu's properly displayed with decorations but I would like the menu behind the boxes to be invisible..?
http://www.theblogfarm.com/ |
Not sure I can do that though because it will not look right in IE... What do you think?
|
It took a bit of twiddling but you might try the following in CSS Inserts.
HTML Code:
.rMenu-ver a, .rMenu-ver a:hover { |
Worked, but had bad effect in IE with irregular box sizes.
|
All times are GMT -6. The time now is 04:12 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.