CSS code:
.pdmenu ul {margin:0; padding:0; width:220px} /* basic settings */
.pdmenu ul li {position: relative} /* where 2nd level list will be rendered */
.pdmenu li ul {position: absolute; left:100px; top:0; display:none}
/* where 2nd level list will rendered when turned on */
.pdmenu ul li a {display:block; text-decoration: underline; color: black; background: #FFFFF0;
padding:3px}
.pdmenu ul li a:hover {text-decoration: none}
.pdmenu li ul li a {border:1px solid #ccc; border-bottom:0; background:white; text-decoration: none}
.pdmenu li ul li a:hover {color: green; background: #eee}
.pdmenu li:hover ul {display:block} /* when hover on top level list LI, display 2nd UL list */
HTML code:
<table align="center" width="60%">
<tr>
<th colspan="2">noted events</th>
</tr><tr>
<td class="pdmenu" align="left">
<ul>
<li><a href="#REPENT">Call to repentance</a></li>
<li><a href="#">Zechariah's 8 visions</a>
<ul>
<li><a href="#RED_HORSE">The man on red horse</a></li>
<li><a href="#4POWERS">The vision of 4 powers</a></li>
<li><a href="#MEAS_LINE">The measuring line</a></li>
<li><a href="#PRIEST">Cleansing of the priests</a></li>
<li><a href="#LAMPSTAND">Lampstand & Olive trees</a></li>
<li><a href="#SCROLL">The flying scroll</a></li>
<li><a href="#BASKET">The woman in the basket</a></li>
<li><a href="#4CHARIOTS">Vision of four chariots</a></li>
</ul>
</ul>
</td><td class="pdmenu" align="left">
<ul>
<li><a href="#">4 messages of Zechariah</a>
<ul>
<li><a href="#MESSAGE1">Rebuke of wrong motives</a></li>
<li><a href="#MESSAGE2">Israel must repent</a></li>
<li><a href="#MESSAGE3">Restoration of Israel</a></li>
<li><a href="#MESSAGE4">Fasts will become feasts</a></li>
</ul>
<li><a href="#">2 burdens of Zechariah</a>
<ul>
<li><a href="#BURDEN1">rejection at first coming</a></li>
<li><a href="#BURDEN2">acceptance at 2<sup>nd</sup> coming</a></li>
</ul>
</ul>
</td>
</tr>
</table>
if any one has seen this problem before or can give me some advice, please do:
the problem is that I have 4 first level list elements, 2 vertical and 2 horizontal
and when the 2nd level pull-down menu comes on it dose not cover over the adjacent 1st livel list text.