I am working with a template designer and we’re having a problem with the ’here’ class and DropMenu.
The problem arises when displaying a child document. You can see here:
http://www.customfitnessconcepts.com/modx/index.php?id=13
The font size is not styled correctly.
We’ve already addressed ’here’ when there are no child documents, but it’s killing the styling when there are child documents.
How can we fix this? What follows is background for anyone who could help. Thanks.
I’m using the following chunk to call the menu:
[[DropMenu?id=`0`&levelLimit=`1`&topnavClass=`menu`&selfAsLink=`0` &pre=``&post=``]]
<br /><br />Here is the css that we are using to style the menu:<br /><br />
/*********************************************************
Side Bar Menu
*********************************************************/
.menu {
padding: 0;
margin: 0;
}
.menu li {
display: inline;
padding: 0;
margin: 0;
list-style: none;
}
.menu li a {
display: block;
font: 700 1.24em "Trebuchet MS", sans-serif;
letter-spacing: -1px;
text-decoration: none;
text-indent: 20px;
color: #575757;
background: url(../images/menu.gif) no-repeat top left;
border-bottom: 1px solid #FFF;
}
.menu li a span {
display: block;
padding: 6px 0 6px 15px;
background: url(../images/menu_bottom.gif) no-repeat bottom left;
}
.menu li a:hover {
color: #111;
background: #EFDDDD url(../images/menu_on.gif) no-repeat top left;
}
.menu li a:hover span {
background: url(../images/menu_bottom_on.gif) no-repeat bottom left;
}
/* Submenu definition begins */
.menu ul {
display: none;
margin: 0;
padding: 1px 0 10px 20px;
border-bottom: 1px solid #FFF;
}
.menu li.here ul {
display: block;
background: #EFDDDD url(../images/menu_on.gif) no-repeat bottom left;
}
/* Last Item */
.menu li.last ul,
.menu li.last a {
border-bottom: 0;
}
/* Current Item */
.menu li.here {
display: block;
font: 700 1.24em "Trebuchet MS", sans-serif;
letter-spacing: -1px;
text-decoration: none;
text-indent: 20px;
list-style: none;
color: #575757;
background: url(../images/menu_on.gif) no-repeat bottom left;
border-bottom: 1px solid #FFF;
}
.menu li.here span {
display: block;
margin: 0;
padding: 6px 0 6px 15px;
background: url(../images/menu_top_on.gif) no-repeat top left;
}
/* Submenu Items */
.menu li.here ul li a {
padding: 3px 0 3px 17px;
font-size: 0.7em;
letter-spacing: 0px;
background: url(../images/menu_sub_bullet.gif) no-repeat 17px center;
border-bottom: 0;
}
.menu li.here ul li a:hover {
background: url(../images/menu_sub_bullet.gif) no-repeat 17px center;
}
.menu li.here ul li a span,
.menu li.here ul li a:hover span {
position: static;
padding: 0;
background: none;
}
<br /><br /><br /><br />
