Need to get rid of White Background for SubMenu Items
 

Hi there,

I have a website, themorrisonbrothersband.com, that looks beautiful using the Atahualpa theme. I am having a little trouble in trying to style the subitems of my page and category menu bars. I've gotten rid of the color backgrounds for the main items, but for some reason I have not been able to get rid of the white backgrounds on the Subitems that have come up as a result. What I'd like to do is just have some sort of generic brown color that looks kind of in line with the leather background I've put in or just to make it transparent altogether.

I have the inserts pasted down below here. Any help on this front would be very appreciated. I'm a very novice programmer and am trying to learn on the fly, so sort of help trying to fix this problem would be amazing. Also, is there any way to get rid of the dashed box around my category menu? I had read in other forums that this is the default setting for a centered category menu, but I don't know which file or what lines to manipulate such that it disappears.

Thanks again!

HTML/CSS inserts:

/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }

ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
background: transparent !important;
}

li.rMenu-expand li a {
background-color:#D38B30 !important;
}
li.rMenu-expand li a:hover {
background-color:#365DA0 !important;
}

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;
}
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
}
/* Reset margin for 2nd+ level items */
div#menu1 ul.rMenu li li {
margin-right: 2px;
}
/* round corners for page menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* reset 2nd+ level */
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

The first place to go for styling the menu items is the Theme Options for the Menu bars. That may be what you are looking for.

On a side note though your background image is HUGE. Over 800 Kb. It took quite awhile to load on a PC at a clients house. That background image really shouldn't be much more that 100 Kb.

Thanks for the heads up.. I'll make the file smaller so it loads faster

The Theme Options won't work cause of the inserts I had put in. There's one line in something that I had posted that is making the background for the sub items white. The parent items and the hover color for the sub items is perfect otherwise though

Sorry, I'm not much help with css... but do you realize you have some really weird links going on on your 2nd menu? I'm seeing this:

http://themorrisonbrothersband.com/h...ry/latestbuzz/

it looks like you are missing a / after the http so it's duplicating the link? I don't think it has anything to do with your problem, but you should probably fix it...

Wow I didn't even realize that that was happening.. do you have any idea what could be causing it? Something with our chosen permalink structure? Thanks for the tip