0
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 &#38; 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.

Edited by pyTony: Question: Changed to discussion thread

2
Contributors
1
Reply
4
Views
5 Years
Discussion Span
Last Post by JorgeM
0

Not sure exactly what you mean, but in any case, I think some of your selectors are not correct... For example, on line #4 you have:

.pdmenu li ul {position: absolute; left:100px; top:0; display:none}

I think it should be:

.pdmenu ul li ul {position: absolute; left:100px; top:0; display:none}

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.