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

.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.

.rMenu-ver a, .rMenu-ver a:hover {
    background: white !important;
}
.rMenu-ver, .rMenu-ver .cat-item {
    background: transparent !important;
}

Worked, but had bad effect in IE with irregular box sizes.