Question

Hi I wrote a code for my menu bar as shown below. The menu bar is supposed to expand only when my mouse is over the menu. But it is expanding by default.

<dt onmouseover="javascript:montre('smenu1');">

    <a href="#">&#9679; About Us</a></dt>
    <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
        <ul>
            <li><a href="../php_sql_scripts/index.php">&ordm; What is microEP?</a></li>
        </ul>
    </dd>   

<dt onmouseover="javascript:montre('smenu12');">

    <a href="#">&#9679; News</a></dt>
    <dd id="smenu12" onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();">
        <ul>
            <li><a href="../php_sql_scripts/news.php">&ordm; Department News</a></li>
        </ul>
    </dd>   

<dt onmouseover="javascript:montre('smenu13');">

    <a href="#">&#9679; Calendar</a></dt>
    <dd id="smenu13" onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">
        <ul>
            <li><a href="../php_sql_scripts/calendar.php">&ordm; Calendar of events</a></li>
        </ul>
    </dd>   


<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=14; i++) 
    {
        if (document.getElementById('smenu'+i)) 
        {
            document.getElementById('smenu'+i).style.display='none';
        }
    }
if (d) 
    {
    d.style.display='block';
    d.style.zIndex = 12;
    }
}
</script>

Answer 1

You must hide the elements when the page is loaded. There’s different way to do this :

1. add a style to each element with display: none
2. doing this through a CSS file
3. call montre() in one of the different loading event, for exemple window.onload

Another topic, like said in one of the comment, you should use a library to do this, for example jQuery.