Need help with sub-menu styling
 

Hi,

I'm wondering if something is overriding the sub-menu CSS I'm inserting on this site http://www.friendsindeedpas.org/fid

Per another thread here I've inserted:

.sub-menu {
position: relative;
top: 70px !important;
}
.sub-menu li {
background: #f2adae !important;
width: 100% !important;
}

(These aren't the values that I want but I just copied the code to get the ball rolling).

No adjustments that I make to the above code seem to effect the sub menu at all (under the first two menu items on this page "WHO WE ARE" and "WHAT WE DO".

Is there some kind of setting in place which is overriding this code?

(Bonus points for the right code to adjust the background color of the current sub-menu item.)

Thanks!

R

So where did you put that CSS?

ATO Options / Add Html/CSS Inserts / CSS Inserts

Where in that section? top or bottom?

In "CSS Inserts" which only has one box, unlike the HTML inserts which have "top" or "bottom" etc.

Try moving that CSS to the top of that box

OK moving the code to the top of the box worked. Thanks!

As long as I have your attention, having trouble figuring the selector to position the second submenu level (grandchild).

This is what I have in place no to work with the first sub menu:
.sub-menu {
position: relative;
top: 30px !important;
}

/* add formatting to submenu items */
div#menu1 ul.rMenu li ul.rMenu-ver li a {
font-size: 12px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px!important;
}

Have you looked at the menu items using a code examiner like FireBug in FireFox?
What does it show has the highest precedence for the elements in question?

p.s. I hope you realize your CSS would work at the bbottom of the option, but you had an error in your CSS above the CSS you were adding. You were missing a closing '}' which invalidated the following CSS.

I didn't realize that, thanks for catching it!

I appreciate the "teach a man to fish..." approach but I'm finding it a little confusing...I'm wondering of there's a "sub-menu" selector which applies specifically to the second level menu?

Actually I think that was just a cut and paste error when posting into the forum...there isn't a missing closing } in what I'm looking at.

You had embedded that CSS inside teh {} of some other CSS that is why it wasn't working originally. When you moved it to the top, you fixed that error.

Again: Have you looked at the menu items using a code examiner like FireBug in FireFox?
What does it show has the highest precedence for the elements in question?

I appreciate you pointing me to the code, I have looked at the code in a browser and I'm having a hard time identifying what applies to the 2nd level of the sub-menu.

I saw in another thread you had given the code ".sub-menu" which seemed to work to apply specifically to the first level of the sub-menu. Is there such a universal identifier for the second level/grandchild sub-menu?

if not, can you help me identify what it is?

Thanks again for your time on this.

So what CSS did the code examiner say it was applying to that menu item?

The more detailed aspects of digging into CSS code are really not my expertise.

Is there any way you can help me identify it, or let me know, as you did in the other thread, if there's a code identifier like "sub-menu" which applies specifically to the 2nd level of the sub-menu?

I managed to identify the individual 2nd level sub-menu items I wanted to move up some...the higher level css indicator though is the same as the one for the next level up of the sub menu so I'm still not sure what would apply to just the 2nd level container itself.

In the mean time I've put in code to move all the second level items where I wanted...It works as I want, but I'm wondering if those menu item indicators are generated manually and might change? (meaning the CSS code might stop working since it points to those specific items?)

Or again is there a way to refer to the 2nd level container itself, like "sub-menu" works for all levels of the sub-menu?

Sure, you have to be more specific in your CSS selector. Lets say you have
and you want the 'div 3' to be red. If you use
then the literal 'div 3' will show in red, but so will 'div 2' and 'div 4'. If you use
then the literal 'div 3' will show in red, 'div 2' will be black but 'div 4' will also be red (that's the cascading part of CSS). one way to make sure only 'div 3' is red would to use two selectors
the first turns red all elements with a class of 'myclass' who also have a parent with a class of 'myclass' (div 3' and 'div 3') and the second turns black all elements with a class of 'myclass' who has a parent with a class of 'myclass' who also has a parent with a class of 'myclass' - i.e. 'div 4'

if you are going to tinker with the look of any theme, you need to understand CSS and how a small change can be far reaching.

That's very detailed and helpful...so if I wanted to have something apply to the second level menu would I simply repeat the ".sub-menu" indicator in the css?

ie: .sub-menu .sub-menu

Yes IF the parent and child elements both have that class assigned - NOTE, if there is other CSS with a more specific CSS Selector, and it has any of the CSS rules your are using, the more specific case will be used.

Where do I pay my tuition for this month's CSS class?

Thanks again for the time JD!