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.