<div class="menu">
    <dl id="menu1">
    <dt>MENU1</dt>
    <dd><a href="#">MENU1.1</a></dd>
    <dd><a href="#">MENU1.2</a></dd>
    </dl>
    <script type="text/javascript">
    // <![CDATA[
    new Menu('menu1', 'position: absolute', true, true, -1, -1, -1, -1, true);
    // ]]>
    </script>
    <dl id="menu2">
    <dt>MENU2</dt>
    <dd><a href="#">MENU2.1</a></dd>
    <dd><a href="#">MENU2.2</a></dd>
    </dl>
    <script type="text/javascript">
    // <![CDATA[
    new Menu('menu2', 'position: absolute; left: 150px', true, true, -1, -1, -1, -1, true);
    // ]]>
    </script>
    
    <dl id="menu3">
    <dt>MENU3</dt>
    <dd><a href="#">MENU3.1</a></dd>
    <dd><a href="#">MENU3.2</a></dd>
    </dl>
    <script type="text/javascript">
    // <![CDATA[
    new Menu('menu3', 'position: absolute; left: 300px', true, true, -1, -1, -1, -1, true);
    // ]]>
    </script>
    
    <dl id="menu4">
    <dt>MENU4</dt>
    <dd><a href="#">MENU4.1</a></dd>
    <dd><a href="#">MENU4.2</a></dd>
    </dl>
    <script type="text/javascript">
    // <![CDATA[
    new Menu('menu4', 'position: absolute; left: 450px', true, true, -1, -1, -1, -1, true);
    // ]]>
    </script>
    
    <dl id="menu5">
    <dt>MENU5</dt>
    <dd><a href="#">MENU5.1</a></dd>
    <dd><a href="#">MENU5.2</a></dd>
    </dl>
    <script type="text/javascript">
    // <![CDATA[
    new Menu('menu5', 'position: absolute; left: 600px', true, true, -1, -1, -1, -1, true);
    // ]]>
    </script>    
</div>

.menu {
    position: relative;
}

.menu dl {
    width: 150px;
    margin: 0;
    padding: 0;
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

.menu dt {
    margin: 0;
    padding: 2px 5px;
    cursor: pointer;
    background: #000 url("tlo.gif") repeat-x center;
    color: white;
    font-weight: bold;
    text-align: center;
}

.menu dd {
    margin: 0;
    padding: 2px 5px;
    background-image: url("tlo2.gif");
    color: #000;
}