I’m using the Wayfinder Dropline example from
http://muddydogpaws.com/development/wayfinder/examples/example-3.html.
It works fine, except I would like the sub-menu to continue to display while in that section, not just on hover. A previous thread mentions that this can normally be achieved using &hideSubMenus=`true` (
http://modxcms.com/forums/index.php/topic,32107.msg195128.html#msg195128), however, it doesn’t work with the Dropline css in place already hiding all the sub-menus.
I’ve got all the templates exactly as in the original Dropline example noted above. I’ve got the following css:
/* Wayfinder dropline menu */
/* common styling - Wayfinder dropline menu */
.menu {font-family: arial, sans-serif; height:30px; position:relative; margin:0; font-size:11px; margin:0 0 20px; background:#fff;}
.menu ul {padding:0; margin:0; list-style-type: none;float:right;}
.menu ul li {float:left; border-left:1px solid #eee;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; padding:5px 10px; height:20px;font: bold 10pt Arial; line-height:20px; color:#fff; background:#8ab000 url(drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;background:none repeat scroll 0 0 #226090;width:100%;text-align:right;}
.menu ul li ul a, .menu ul li ul a:visited {background:#226090;font-weight:normal;color:#fff;padding:5px 20px;}
.menu ul li ul li {border:none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff;background:#226090;text-decoration:none;}
.menu ul li:hover ul {display:block; position:absolute; top:30px; left:0; background:#226090; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#226090 url(drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#226090; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##226090;}
.menu ul li:hover ul li a:hover {background:#226090;text-decoration:underline;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#226090;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#226090; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#226090; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#226090; color:#fff;}
/* end Wayfinder dropline menu */
I’ve tried playing around with the .active class, but no luck. Does anyone know what I need to do to make the child menu display while in its section?
Thank you!
