Right, after several fruitless hours I figured I would trouble the kind people of GDF for their thoughts - I basically want a coloured border on the left of the currently active page <LI>, and I want this to smoothly follow the mouse up and down the <UL>. Trouble comes when I want to embed a <UL> in an <LI> element for a sub menu... turns out, things break 
I have tried simply using a class to denote the submenu items, rather than another <UL>, but then I cannot specify a different rollover effect for those <LI>s.
Oh, and the current page/subpage should kinda be highlighted too lol.
My HTML/CSS at the moment is:
I have tried both lavalamp and ahover plugins, are there any others available? Or any ideas for how to achieve this? Other than a plain-jane CSS rollover of course; that's no fun 
I have tried simply using a class to denote the submenu items, rather than another <UL>, but then I cannot specify a different rollover effect for those <LI>s.
Oh, and the current page/subpage should kinda be highlighted too lol.
My HTML/CSS at the moment is:
Code:
div#menubox { padding:34px 0px; background:#2d2d2d; }
div#menubox ul#menu { list-style:none; position:relative; }
div#menubox ul#menu li { font-size:10px; padding:0px 0px 0px 30px; width:190px; }
div#menubox ul#menu li a { position:relative; z-index:10; color:#878787; display:block; height:16px; padding:1px 0px; }
div#menubox ul#menu li ul#submenu { list-style:none; position:relative; margin-left:-30px; }
div#menubox ul#menu li ul#submenu li { font-size:10px; padding:0px 0px 0px 45px; width:170px; }
div#menubox ul#menu li ul#submenu li a { position:relative; z-index:20; color:#6daee1; display:block; height:16px; padding:1px 0px; }
div#menubox ul#menu a.current { margin:0px 0px 0px -30px; padding:1px 0px 1px 6px; width:214px; border-left:25px solid #000000; background:url('sh/im/page_arrow.png') center right no-repeat; }
div#menubox ul#menu ul#submenu a.current { margin:0px 0px 0px -45px; padding:1px 0px 1px 6px; width:199px; border-left:40px solid #6daee1; }
div#menubox ul#menu div.ahover { position:absolute; z-index:5; border-left:25px solid #000000; background:url('sh/im/page_arrow.png') center right no-repeat; margin-left:12px; }
div#menubox ul#menu ul#submenu div.ahover { position:absolute; z-index:15; border-left:40px solid #6daee1; }
***********************************
<div id="menubox">
<ul id="menu">
<li><a href="#">Welcome</a></li>
<li><a href="#">Customers & Projects</a></li>
<li><a href="#">Product Range</a></li>
<li><a href="#">How We Work</a></li>
<li><a href="#" class="current">Company Information</a>
<ul id="submenu">
<li><a href="#">Company History</a></li>
<li><a href="#" class="current">Company Structure</a></li>
<li><a href="#">Mission, Vision & Values</a></li>
<li><a href="#">Financials</a></li>
<li><a href="#">Careers & Vacancies</a></li>
<li><a href="#">Location</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
...
Comment