Вложенное меню, каждый пункт которого содержит свое подменю, открывающееся при клике на этом нем.

Код примера приведен ниже (на этот раз мы выделили стили отдельно в тег <style>):


<style>
    #ul_1 {background: rgb(230,230,230);}
    #ul_2 {background: rgb(230,200,250);}
    #ul_3 {background: rgb(250,250,200);}
    #div li ul {display:none; border: 1px
solid #777777; width: 190px;}
    #div ol {margin: 5px; background: rgb(210,170,250); width: 250px; border: 1px solid #777777;}
    #div li a:hover {background: rgb(100,250,200);}

    #div ul li {border: 1px solid rgb(200,155,255); margin: 2px;}

 </style>
 <div id="div" style="font-family: Verdana; font-size:
17px; border: 1px solid #777777; width: 300px">
Покликайте на разных пунктах основного меню и посмотрите на эффект
раскрытия подменю.
 <ol id="slide_ol" >
 <p>Вложенный двухуровневый список с
опциональным раскрытием пунктов</p>
 <li><a href="#" onclick="$('#ul_1').slideToggle('slow');return false">Первый пункт</a>
    <ul id="ul_1">
    <li>Первый подпункт</li>
    <li>Второй подпункт</li>
    <li>Третий подпункт</li>
    </ul>  </li>
 <li ><a href="#" onclick="$('#ul_2').slideToggle('slow');return false">Второй пункт</a>
 <ul id="ul_2">
    <li>Первый подпункт</li>
    <li>Второй подпункт</li>
    <li>Третий подпункт</li>
    </ul>
 </li>
 <li ><a href="#" onclick="$('#ul_3').slideToggle('slow');return false">Третий пункт</a>
 <ul id="ul_3">
    <li>Первый подпункт</li>
    <li>Второй подпункт</li>
    <li>Третий подпункт</li>
    </ul>
 </li><br>
 </ol>
 </div>