Estoy usando un menú desplegable y un formulario con un menú desplegable de selección justo debajo.

El problema es que cuando abro el menú desplegable en el formulario y selecciono la primera opción ("1"), el menú se abre automáticamente.

Si uso algunos<br> o poner un margen superior en el formulario div, esto no sucede, así que creo que tiene algo que ver con la proximidad del menú con el formulario, pero no puedo entender qué está pasando.

Aquí hay un ejemplo de lo que está sucediendo (alternativamente comojsfiddle):

    #menu {
        position: relative;
        z-index: 1;
        clear: both;
    }

    #nav{
        height: 39px;
        font: 14px Arial,Verdana,sans-serif;
        background: #f8f8f8;
        border: 1px solid #DDDDDD;  
        border-radius: 3px;
        min-width:500px;
        margin-left: 0px;
        padding-left: 0px;
    }   

    #nav li{
        list-style: none;
        display: block;
        float: left;
        height: 40px;
        position: relative;
        border-right: 1px solid #DDDDDD;
    }

    #nav li a{
        padding: 0px 30px 0px 30px;
        margin: 0px 0;
        line-height: 40px;
        text-decoration: none;
        border-right: 1px solid #DDDDDD;
        height: 40px;
        color: #6791AD;
        font-weight: bold;
    }

    #nav ul{
        background: #f2f5f6; 
        padding: 0px;
        border-bottom: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        border-left:1px solid #DDDDDD;
        border-radius: 0px 0px 3px 3px;
        box-shadow: 2px 2px 3px #ECECEC;
        -webkit-box-shadow: 2px 2px 3px #ECECEC;
        -moz-box-shadow:2px 2px 3px #ECECEC;
        width:200px;
    }

    #nav li:hover{
        background: white;
    }
    #nav li a{
        display: block;
    }
    #nav ul li {
        border-right:none;
        border-bottom:1px solid #DDDDDD;
        width:200px;
        height:39px;
    }

    #nav ul li li {
        background: #f2f5f6; 
        padding: 0px;
        border-bottom: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        border-left:1px solid #DDDDDD;
        border-radius: 0px 0px 3px 3px;
        box-shadow: 2px 2px 3px #ECECEC;
        -webkit-box-shadow: 2px 2px 3px #ECECEC;
        -moz-box-shadow:2px 2px 3px #ECECEC;
        width:200px;
    }

    #nav ul li ul {
        background: #f2f5f6; 
        padding: 0px;
        border-bottom: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
        border-left:1px solid #DDDDDD;
        border-radius: 0px 0px 3px 3px;
        box-shadow: 2px 2px 3px #ECECEC;
        -webkit-box-shadow: 2px 2px 3px #ECECEC;
        -moz-box-shadow:2px 2px 3px #ECECEC;
        width:200px;
    }

    #nav ul li a {
        border-right: none;
        color:#6791AD;
        text-shadow: 1px 1px 1px #FFF;
        border-bottom:1px solid #FFFFFF;
    }
    #nav ul li:hover{background:#DFEEF0;}
    #nav ul li:last-child { border-bottom: none;}
    #nav ul li:last-child a{ border-bottom: none;}
    /* Sub menus */
    #nav ul{
        display: none;
        visibility:hidden;
        position: absolute;
        top: 40px;
    }

    /* Third-level menus */
    #nav ul ul{
        top: 0px;
        left:200px;
        display: none;
        visibility:hidden;
        border: 1px solid #DDDDDD;
    }
    /* Fourth-level menus */
    #nav ul ul ul{
        top: 0px;
        left:170px;
        display: none;
        visibility:hidden;
        border: 1px solid #DDDDDD;
    }

    #nav ul li{
        display: block;
        visibility:visible;
    }
    #nav li:hover > ul{
        display: block;
        visibility:visible;
    }

<div id='menu'>
    <ul id='nav'>
        <li>
            <a href='#'>Level 1</a>
            <ul>
                <li><a href='#'>Level 1-1</a>
                    <ul>
                        <li><a href='#'>Level 1-1-1</a></li>
                        <li><a href='#'>Level 1-1-2</a></li>
                    </ul>   
                </li>
                <li><a href='#'>Level 1-2</a>
                    <ul>
                        <li><a href='#'>Level 1-2-1</a></li>
                        <li><a href='#'>Level 1-2-2</a></li>
                    </ul>   
                </li>
                <li><a href='#'>Level 1-3</a>
                    <ul>
                        <li><a href='#'>Level 1-3-1</a></li>
                        <li><a href='#'>Level 1-3-2</a></li>
                    </ul>   
                </li>
            </ul>
        </li>
    </ul>
</div>
<div class='form'>
    <form>
        <select>
            <option selected='true'> 1 </option>
            <option> 2 </option>
            <option> 3 </option>
        </select>
        <input type='button' value="Go"/>
    </form>
</div>