Keep Rollover On During Dropdown

[metazai]

A CSS (and possibly JavaScript?) question:

I have a css-driven text dropdown menu with rollovers, that I had to tweak the heck out of to satisfy cross-browser issues and constant customer changes. It has a text item, then a "|", then a text item, etc . . .

The problem is that the rollover on the menu bar turns off when I roll down into the dropdown menu. I know there's a way, JavaScript or otherwise, to keep that turned on while the dropdown list is extended, and I've found some ideas online, but I cannot see how to apply it to my code. Any suggestions would be welcome.

Here's the CSS:

#menubar {
	width:880px;
	height:44px;
	background-color:#424242;
	margin:0 auto;
	text-align:center;
}
#navbar {
	margin: 0 auto;
	padding: 0px 0px 0px 2px;
	font-weight:normal;
}
#navbar li {
	list-style: none;
	float: left;
	color: #fff;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:normal;
}
#navbar li a {
	height:30px;
	display: block;
	padding: 10px 12px 4px 12px;
	background-color: #424242;
	color: #fff;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:19px;
	font-weight:normal;
}
#navbar li a:hover {
	display: block;
	background-color: #797979;
	text-decoration: underline;
	color:#d9d045;
	font-weight:normal;
}
#navbar li ul {
	display: none;
	background-color: #797979;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	width:193px;
}
#navbar li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	background-color: #797979;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	width:193px;
	font-weight:normal;
}
#navbar li li {
	text-align:left;
	background-color: #797979;
	color: #fff;
}
#navbar li:hover li {
	float: none;
}
#navbar li:hover li a {
	background-color: #797979;
	height:auto;
	color: #fff;
	text-decoration: none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}
#navbar li li a:hover {
	color:#d9d045;
}

Here's a sample of a couple of menu items in the HTML:

<div id="menubar">
      <ul id="navbar">
        <li><a href="pagelist.php" title="PageList"><span>PageList</span></a>
          <ul>
            <li><a href="page2.php" title="Page2">Page2</a></li>
            <li><a href="page3.php" title="Page3">Page3</a></li>
            </ul>
        </li>
        <li style="height:30px;
	display: block;
	padding: 7px 0px;">|</li>
        <li><a href="#" title="Biography"><span>Biography</span></a>
          <ul>
            <li><a href="about.php" title="About">About</a></li>
            <li><a href="curriculum.php" title="Curriculum">Curriculum</a></li>
            </ul>
        </li>
</ul>
</div>