Hi All...again
im having trouble with the dropline menu, i want to make each item persisiant ala
http://www.stunicholls.com/menu/pro_dropline_3.html
its current state is, www.aspiredevelopmentserver.co.uk/simpson
i want to be able to click on level 1, and level 2 is deisplayed - thats fine, but when i hover over other level 1 items it displays their child level.
my css is
/* common styling */
.menu {font-family: arial, sans-serif; font-weight:bold; width:680px; height:25px; position:relative; padding-left:25px;font-size:12px; margin:0px 0 0 0px; background:#ffffff url(menu-top.gif) repeat-x; }
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:auto;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:auto; text-decoration:none; padding:0 5px 0 5px; height:25px; line-height:25px; color:#13588f; background:#ffffff url(menu-top.gif) repeat-x;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a{color:#fff; background:#ffffff url(menu-hover.gif) repeat-x;}
.menu ul li.active a {color:#fff; background:#ffffff url(menu-hover.gif) repeat-x;}
.menu ul li:hover ul, .menu ul li.active ul {display:block; position:absolute; width:680px; top:25px; left:0px; background:#ffffff url(menu-sub.gif) repeat-x; color:#fff; font-size:11px; margin:0px 0 0 0px; padding-left:25px;}
.menu ul li:hover ul.right_side li, .menu ul li.active ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li, .menu ul li.active ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide, .menu ul li.active ul li a.hide{background:#ffffff; color:#fff;}
.menu ul li:hover ul li:hover a.hide, .menu ul li:hover ul li.active a.hide {background:#b3ab79; color:#fff; }
.menu ul li:hover ul li ul, .menu ul li.active ul li ul {display: none;}
.menu ul li:hover ul li a, .menu ul li.active ul li a{display:block; background:#ffffff url(menu-sub.gif) repeat-x; color:#666666;}
.menu ul li:hover ul li a:hover {background:#ffffff url(menu-top.gif) repeat-x; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:25px; color:#000; background:#ffffff url(menu-top.gif) repeat-x;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
and i used the method from this page which partially works for what i require.
http://modxcms.com/forums/index.php?topic=27831.0
i appreciate any help that can be provided with this.
