Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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
Comment #1
kubica@kralovedvorsko.cz CreditAttribution: kubica@kralovedvorsko.cz commentedThere 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
Comment #2
yrocq CreditAttribution: yrocq commentedSeems to work, so I close this issue :-)
Comment #4
AsVit CreditAttribution: AsVit commentedYes, 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..