<div class="menu">

                <ul style="padding-left: 0.1em;" onmouseover="showItem('item1');highlightItem('hItem1');" onmouseout="hideItem('item1');lowlightItem('hItem1');">

                        <li>

                                <a href="#" id="hItem1">File</a>

                                <ul id="item1" onmouseout="hideItem('item1');lowlightItem('hItem1');">

                                        <li><a href="#">Option1</a></li>

                                        <li><a href="#">Option2s</a></li>

                                        <li><a href="#">Option3</a></li>

                                        <li><a href="#">Option4</a></li>

                                </ul>

                        </li>

                </ul>

                <ul onmouseover="showItem('item2');highlightItem('hItem2');" onmouseout="hideItem('item2');lowlightItem('hItem2');">

                        <li>

                                <a href="#" id="hItem2">Fonts2</a>

                                <ul id="item2" onmouseout="hideItem('item2');lowlightItem('hItem2');">

                                        <li><a href="#">Option1</a></li>

                                        <li><a href="#">Option2</a></li>

                                        <li><a href="#">Option3</a></li>

                                        <li><a href="#">Option4</a></li>

                                </ul>

                        </li>

                </ul>

                <ul onmouseover="showItem('item3');highlightItem('hItem3');" onmouseout="hideItem('item3');lowlightItem('hItem3');">

                        <li>

                                <a href="#" id="hItem3">Fonts3</a>

                                <ul id="item3" onmouseout="hideItem('item3');lowlightItem('hItem3');">

                                        <li><a href="#">Option1</a></li>

                                        <li><a href="#">Option2</a></li>

                                        <li><a href="#">Option3</a></li>

                                        <li><a href="#">Option4</a></li>

                                </ul>

                        </li>

                </ul>

        </div>

function showItem(id)

{document.getElementById(id).style.display='block';}

function hideItem(id)

{document.getElementById(id).style.display='none';}

function highlightItem(id)

{

        document.getElementById(id).style.backgroundColor='#669933';

        document.getElementById(id).style.color='#FFF';

        document.getElementById(id).style.borderColor='#558822';

}

function lowlightItem(id)

{

        document.getElementById(id).style.backgroundColor='#EEE';

        document.getElementById(id).style.color='#444';

        document.getElementById(id).style.borderColor='#DDD';

}

.menu{

        width: 63.8em;

        height:  2.1em;

        margin: 0 0.5em 0.3em 0.5em;

        background-color: #336699;

        border: 0.1em solid <?php echo $Config['header_bord_color']; ?>;

        line-height: 1.4em;

        white-space: nowrap;

}

.menu ul {

        display: block;

        list-style-type: none;

        z-index: 90;

        text-align: center;

}

.menu ul li{

        width: 13em;

        white-space: nowrap;

        float: left;

        position: relative;

}

.menu ul li a{

        font-size: 0.95em;

        font-weight: normal;

        text-decoration: none;

        text-transform: uppercase;     

        background-color: <?php echo $Config['menu_bg_color']; ?>;

        color: <?php echo $Config['menu_font_color']; ?>;

        border: 0.1em solid <?php echo $Config['menu_bord_color']; ?>;

        padding: 0.3em 1.6em;

        display: block;

       

}

.menu ul li a:hover{

        text-decoration: none;

        background-color: <?php echo $Config['smenu_bg_color']; ?>;

        color: <?php echo $Config['smenu_font_color']; ?>;

        border: 0.1em solid <?php echo $Config['smenu_bord_color']; ?>;

}

.menu ul li ul{

        position: absolute;

        left: 0;

        top: auto;

        display: none;

        z-index: 200;

        width: 13em;

}

.menu ul li ul li{

        position: relative;

}

.menu ul li ul li a{

        padding: 0.3em 1.6em;

        font-size: 0.8em;

}