I want my submenu items to be smaller then my top-level menu items.
I can successfully style my top level (actually all levels) with this css:

#block-dynamic_persistent_menu-0 a
{
font: 16px Osaka, Georgia, serif;
color: white;
text-decoration: none;
}

but so far I cannot come up with the correct css to style the submenu items. I am trying something like this but it is not working:

.dynamic-persistent-menu-sub-menu-itemcollapsed a li ul
{
font: 12px Osaka, Georgia, serif;
color: white;
text-decoration: none;
}

Comments

kubica@kralovedvorsko.cz’s picture

kubica@kralovedvorsko.cz CreditAttribution: kubica@kralovedvorsko.cz commented

There is solution.

.dynamic-persistent-menu-menu-item a
{
}

.dynamic-persistent-menu-sub-menu-itemcollapsed a
{
}

.dynamic-persistent-menu-menu-item a:visited
{
}

There is sample: www.kralovedvorsko.cz

yrocq’s picture

yrocq CreditAttribution: yrocq commented
Status: Active » Fixed

Seems to work, so I close this issue :-)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

AsVit’s picture

AsVit CreditAttribution: AsVit commented

Yes, I was confronted with this issue in designing the project http://www.go-dating.net (under development
)
Maybe this solution fit you.
CSS:
#block-dynamic_persistent_menu-0 {
line-height:2;
padding:0;
}
.block-dynamic_persistent_menu {
padding: 0;
background-image: url('images/bg-shade-light.png');
background-repeat: repeat-x;
background-position: left top;
}
.dynamic-persistent-menu-menu-item a:link, .dynamic-persistent-menu-menu-item a:visited {
text-decoration: none;
white-space: nowrap;
color: #FFF;
font-weight: bold;
padding: 0.36em 1em;
background-image: url('images/bg-shade-light.png');
background-repeat: repeat-x;
background-position: left top;
color:#777777;
margin:0;
}
.dynamic-persistent-menu-menu-item a:hover {
padding:0.4em 1em 0.42em;
background-image: url('images/bg-shade-medium.png');
background-repeat: repeat-x;
background-position: left top;
color:#FFFFFF;
margin:0;
}
.dynamic-persistent-menu-menu-item a.active, .dynamic-persistent-menu-menu-item a.active-trail {
padding:0.4em 1em 0.42em;
background-image: url('images/bg-shade-dark.png');
background-repeat: repeat-x;
background-position: left top;
color:#FFFFFF;
}
.dynamic-persistent-menu-sub-menu {
padding: 0;
background-color: #F1F1F1;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
}
.dynamic-persistent-menu-sub-menu-item a:link, .dynamic-persistent-menu-sub-menu-item a:visited {
text-decoration: none;
white-space: nowrap;
color: #FFF;
padding: 0.36em 1em;
color:#777777;
background-color: #F1F1F1;
}
.dynamic-persistent-menu-sub-menu-item a:hover {
padding:0.4em 1em 0.42em;
color:#777777;
text-decoration: underline;
background-color: #F1F1F1;
}
.dynamic-persistent-menu-sub-menu-item a.active, .dynamic-persistent-menu-sub-menu-item a.active-trail {
padding:0.4em 1em 0.42em;
font-weight: bold;
text-decoration: underline;
color:#A3A3A3;
background-color: #F1F1F1;
}
--
images that I use you can replace your own..