Don't think you can do this in just plain CSS, you might have to use some javascript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
/*DISCLAIMER*/
h1 { position: absolute; bottom: 0px; right: 0px; font-family: tempus sans itc; color: rgb(100,100,100) }
ul, ul il, il ul, li ul a { margin: 0px; padding: 0px; }
ul { list-style: none; width: 160px; height: 20px; }
ul li { position: relative; }
/*DROP DOWN MENU*/
li ul { position: relative; down: 159px; width: 242px /*SAME AS OPTION STYLE*/; text-align: center; top: 0px; right: 41px; display: none; }
/*LINK STYLE*/
ul li a { display: block; text-decoration: none; font-family: tempus sans itc; color: white; background-color: rgb(100,100,100)/*SAME AS OPTION STYLE*/; font-weight: 700; }
/*OPTION STYLE*/
li ul a { background-color: rgb(100,100,100) /*SAME AS LINK STYLE*/; }
/*DISPLAY*/
li:hover ul { display: block; }
/*LINK HOVER STYLE*/
ul li a:hover { background: rgb(50,50,50) /*SAME AS MENU HOVER*/; width: 160px; }
/*MENU HOVER STYLE*/
li ul a:hover { width: 242px /*SAME AS DROP DOWN MENU*/; background: rgb(50,50,50) /*SAME AS DROP DOWN MENU*/; }
/*EMPTY TABLE CELLS*/
td.trans { background: rgb(150,150,150); width: 40; height: 20px; }
td.parent { background: rgb(150,150,150); width: 160; height: 20px; }
</style>
<title>TEST PAGE 3</title>
<script type="text/javascript">
function keepColor(where){
document.getElementById(where).style.background='rgb(50,50,50)';
}
function loseColor(where){
document.getElementById(where).style.background='';
}
</script>
</head>
<body>
<h1>TEST PAGE 3</h1>
<table cellpadding="0" cellspacing="4" border="0" width="960"><tr>
<!-- HUB LINK -->
<td><ul><li><a href="#">hub</a></li></ul>
<td class="trans">
<!-- LOG LINK -->
<td><ul class="link"><li><a href="#" id="link2">log</a><ul>
<li><a href="#" onmouseover="keepColor('link2')" onmouseout="loseColor('link2')">log option 1</a></li>
<li><a href="#" onmouseover="keepColor('link2')" onmouseout="loseColor('link2')">log option 2</a></li></ul></ul>
<td class="trans">
<!-- WORKS LINK -->
<td><ul><li><a href="#" id="link3">works</a><ul>
<li><a href="#" onmouseover="keepColor('link3')" onmouseout="loseColor('link3')">works option 1</a></li>
<li><a href="#" onmouseover="keepColor('link3')" onmouseout="loseColor('link3')">works option 2</a></li>
<li><a href="#" onmouseover="keepColor('link3')" onmouseout="loseColor('link3')">works option 3</a></li></ul></ul>
<td class="trans"><td class="parent">
<td class="trans"><td class="parent"></table>
</body></html>
Also I dont see the need to have the table for the menu. And your menu doesn't seem to work in IE.