Drop Down Menu stop from expanding Div

Drop Down Menu stop from expanding Div

Hi Everyone,

I am trying to make a menubar which will sit at the top of a webpage.  The menu bar needs to have one drop down menu, but will also contain several other elements such as small icons and other buttons.  What I want to have have is when i click on the drop down menu it expands but does not cause the rest of this menu bar to expand.  So essentially I want the menu items to float over the rest of the page.  The code I have created so far will show what is currently happening and is below:

  1. <html>
        <head>
            <style type="text/css">
                body{
                background:#534741;
                font-family:Arial, Helvetica, sans-serif;
                font-size:12px;
                }
               
                ul, li{
                margin:0;
                padding:0;
                list-style:none;
                }
               
                .menu_head{
                border:1px solid #998675;
                }
               
                .menu_body {
                display:none;
                width:184px;
                border-right:1px solid #998675;
                border-bottom:1px solid #998675;
                border-left:1px solid #998675;
                }
               
                .menu_body li{
                background:#493e3b;
                }
               
                .menu_body li a{
                color:#FFFFFF;
                text-decoration:none;
                padding:10px;
                display:block;
                }
            </style>

            <script type="text/javascript" src="jquery.js"></script>
           
            <script type="text/javascript">
                function show()
                {
                    $('ul.menu_body').slideToggle('medium');

                }
            </script>
        </head>   

        <body>
            <div id="topnav">
                <table>
                    <tr>
                        <td>
                            <input type="button" value="Loadset" onclick="show()" width="184" height="32" class="menu_head"></input>
                            <ul class="menu_body">
                                <li><a href="#">Menu 1</a></li>
                                <li><a href="#">Menu 2</a></li>

                                <li><a href="#">Menu 3</a></li>
                                <li><a href="#">Menu 4</a></li>
                                <li><a href="#">Menu 5</a></li>

                                <li><a href="#">Menu 6</a></li>
                                <li><a href="#">Menu 7</a></li>
                            </ul>
                        </td>
                        <td>
                        <input type="button" value="Button 1"></input>
                        <input type="button" value="Button 2"></input>
                        <input type="button" value="Button 3"></input>
                        <input type="button" value="Button 4"></input>
                        <input type="button" value="Button 5"></input>
                        </td>
                    </tr>       
                </table>   
            </div>
        </body>
    </html>














































































I want for the menu to expand down, but the div containg the menu and the other buttons to remain the size they are initially.  Please let me know if there is a better way of laying the page out of a css trick I can use to make this happen.  Let me know if you need more detail.

Thank You,
Nathan