Menus and Sub-Menus all the same font & size?

[Worldbuilder]

Hi all,

At http://joomlatest.chrisbartlett.net/ I am building a test site. Almost done. See the top menu? It's Garamond in its font. I did that by adding:

#header ul,
#header ul.menutop li,
#header ul.menutop li a{
font-family: garamond, georgia, monotype corsiva, calibri;
padding:0;
height:auto;
}

The green was never there before. Well, that made the top part garamond (Home, Governance, etc), but not any and all sub-menus. :-( I've tried a few things to no avail. I'm assuming the sub-menus are currently Arial, Times, or some default, and I'm also assuming that's what the top menus were before I added what I added. What can I do to get them all Garamond? Also, is there anything expressly defining the font-size? Certainly nothing I did...

Here's the entire CSS file:

/* CORE */

.menutop,.menutop * {margin:0;padding:0;}
.menutop {float:left;position:relative;padding-bottom:2px;}
.menutop li {list-style:none;position:relative;width:100%;height:25px;float:none;}
.menutop li a.item {cursor:pointer;}
.menutop li span.item {cursor:default;outline:none;}
.menutop li .item {display:block;float:left;display:block;margin:0;height:25px;line-height:25px;}
.menutop li li .item, 
.menutop li .item, .menutop li.active li .item {display:block;margin:0;text-decoration:none;float:none;}
.menutop li .fusion-submenu-wrapper, .menutop li ul {float: none;left: -999em;position: absolute;z-index: 500;}
.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
.menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
.menutop li li {position:relative;float:none;}

/* Drop Downs */
.menutop ul {width:175px;position:relative;}

/* Level 1 */
.menutop li .item {
text-decoration:none;
display:block;
padding:0 15px;
background:#ddd;
border-color:#eee #ccc #ccc #eee;
border-style:solid;
border-width:1px;
color:#333333;
text-decoration:none;
}

.level1 .f-mainparent-itemfocus .item {
background:#ccc 100% 100% no-repeat;
border-color:#ddd #bbb #bbb #ddd;
border-style:solid;
border-width:1px;
}

.menutop li:hover > .item {
background-color:#ccc;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
}

.menutop li:hover > .daddy:hover {
background-image:url(../images/top-light.png);
background-position: 100% 100%;
}

/* Level 2 */
.menutop .level2 li > .item {
background:#ccc;
border-color:#ddd #bbb #bbb #ddd;
border-style:solid;
border-width:1px;
}

.menutop .level2 li:hover > .daddy, .menutop .level2 li > .daddy {
background-image:url(../images/level2-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}

.menutop .level2 .f-menuparent-itemfocus .item, .menutop .level2 li:hover .item {
background:#bbb;
border-color:#ccc #aaa #aaa #ccc;
color:#333;
}

.menutop .level2 .f-menuparent-itemfocus .daddy, .menutop .level2 li:hover .daddy {
background-image:url(../images/level3-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}


/* Level 3 */
.menutop .level3 li > .item {
background:#bbb;
border-color:#ccc #aaa #aaa #ccc;
border-style:solid;
border-width:1px;
}

.menutop .level3 li:hover > .daddy, .menutop .level3 li > .daddy {
background-image:url(../images/level3-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}

.menutop .level3 .f-menuparent-itemfocus .item, .menutop .level3 li:hover .item {
background:#aaa;
border-color:#bbb #999 #999 #bbb;
color:#333;
}

.menutop .level3 .f-menuparent-itemfocus .daddy, .menutop .level3 li:hover .daddy {
background-image:url(../images/level4-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}

/* Level 4 */
.menutop .level4 li > .item {
background:#aaa;
border-color:#bbb #999 #999 #bbb;
border-style:solid;
border-width:1px;
}

.menutop .level4 li:hover > .daddy, .menutop .level4 li > .daddy {
background-image:url(../images/level4-parent.png);
background-position:100% 50%;
background-repeat:no-repeat;
}

.menutop .level4 .f-menuparent-itemfocus .item, .menutop .level4 li:hover .item {
background:#999;
border-color:#aaa #888 #888 #aaa;
color:#333;
}

/* regular hover
.menutop li:hover .item:hover, .menutop li.active .item:hover  {
background-color:#2c87c0;
border-top:1px solid #138fdc;
border-left:1px solid #138fdc;
border-right:1px solid #0d5f92;
border-bottom:1px solid #0d5f92;
color:#fff
}
 */
.menutop li:hover .daddy:hover, .menutop ul li.active:hover > .daddy:hover {
background-image:url(../images/hover-parent.png);
background-repeat: no-repeat;
background-position: 100% 50%;
}

/* seperator hover */
.menutop span.item:hover,
.menutop li:hover span.item:hover {
background-color:#666;
border-top:1px solid #777;
border-left:1px solid #777;
border-right:1px solid #555;
border-bottom:1px solid #555;
color:#fff
}

.menutop li:hover span.daddy:hover {
background-image:url(../images/sep-parent.png);
background-repeat: no-repeat;
background-position: 100% 50%;
}

/* Root Items */
.menutop li.root {width:auto;float:left;height:30px;} 
.menutop li.root > .item {float:left;width: auto;height:30px;line-height:30px;}
.menutop li.root:hover > .daddy:hover {
background-image:url(../images/top-light.png);
background-position: 100% 100%;
}

.menutop li.root > .daddy, .menutop li.root:hover > .daddy {
background-image: url(../images/top-dark.png);
background-position: 100% 100%;
background-repeat: no-repeat;
}

/* Active Items 
.menutop li.active > .item {
background-color:#EE501C;
border-color:#F86134 #D24916 #D24916 #F86134;
color:#fff;
} */

.menutop li.active > .daddy {
background-image:url(../images/active-parent.png);
background-repeat: no-repeat;
background-position: 100% 50%;
}

.menutop li.root.active > .daddy, .menutop li.root.active:hover > .daddy {
background-image:url(../images/top-light.png);
background-position: 100% 100%;
}


/* No JS */
.menutop li:hover > .fusion-submenu-wrapper, .menutop li:hover > ul {left:175px;top:0;}
.menutop li.root:hover > .fusion-submenu-wrapper, .menutop li.root:hover > ul {top:32px;left:0;}
.menutop li:hover ul, 
.menutop li.sfHover ul {left: 0;top:32px;}
.menutop ul {width:175px;}
.menutop li li:hover > ul, .menutop li li.sfHover > ul {left:175px;top: 0;}

.menutop .level2 li {position:relative;float:left;width:100%;}

/* Fusion Pill */
.fusion-pill-l {height: 35px;margin:0 0 0 12px;top:6px;width:50px;position:absolute;left:0;}
.fusion-pill-r {margin-left: -12px;height: 35px;}

/* Fusion JS */
.fusion-js-container {
display:block;
height:0;
left:0;
overflow:visible;
position:absolute;
top:0;
z-index:600000!important;
background:transparent !important;
}

.fusion-js-subs {
display:none;
margin:0 0 0 -2px;
overflow:hidden;
padding:0 2px;
position:absolute;
}

#header ul,
#header ul.menutop li,
#header ul.menutop li a{
font-family: garamond, georgia, monotype corsiva, calibri;
padding:0;
height:auto;
}
#header ul.menutop li a,
#header ul.menutop li.active a{
padding:0 5px;
height:auto;
}
.fusion-js-subs li{
text-align:left;
padding:0;
}
.fusion-js-subs li a{
padding:0 5px!important;
}

#header ul li a {
font-weight: bold;
}

Thanks!

Chris

[PicnicTutorials]

When I can't figure out something like this ill use !important to find which rule I need to target. Now that you have the rule then work on writing it so its more specific so overrules the other. Something like ul li li a {}

[DanGamble]

#header ul,
#header ul.menutop li,
#header ul.menutop li a{
font-family: garamond, georgia, monotype corsiva, calibri;
padding:0;
height:auto;
}

Change this to:

#header ul,
#header ul.menutop li,
#header ul.menutop li a,
ul,
ul.menutop li,
ul.menutop li a {
font-family: garamond, georgia, monotype corsiva, calibri;
padding:0;
height:auto;
}

I'm sure it's not the best solution but it's an workaround until i can look at it properly. The dropdown menu item's aren't located in the #header so they aren't picking up the styles you set on the top level nav items.

[Worldbuilder]

Tried your edit, Dan. No change. :-(

[DanGamble]

Tried your edit, Dan. No change. :-(

I checked and you had put an '#' infront of the ul's i added. Leave the ul's bare as they are an element not an ID.

You would add a '#' infront of something in css when you have defined it as an ID in your html In this case the 3 ul's i added aren't in an ID so don't need to be prefixed by one

[Worldbuilder]

Originally, I did not have the #s. When that didn't work, I added them (for fun, but i know you're right). Didn't work either way. :-(

[Worldbuilder]

OH WAIT! It worked! MY bad. Sorry!

You won't believe this... I had forgotten to add the comma to the end of the 3rd line of code, before starting your additional code. THANKS!

[DanGamble]

OH WAIT! It worked! MY bad. Sorry!

You won't believe this... I had forgotten to add the comma to the end of the 3rd line of code, before starting your additional code. THANKS!

Ha It's no problem like i said i'm sure it's not the best fix but it does the job for the time being