I am trying to create a drop-down select menu with custom css (similar to the drop-down selection of language at http://translate.google.com/#).

I have current html code:

<ul id="Select">
    <li>
        <select id="myId"               
            onmouseover="mopen('options')" 
            onmouseout="mclosetime()">

        <div id="options" 
            onmouseover="mcancelclosetime()"
            onmouseout="mclosetime()">
            <option value="1" selected="selected">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </div>
        </select>
    </li>
</ul>

and the Javascript:

function mopen(id)
{   
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
        ddmenuitem.style.visibility = 'visible';

}

But document.getElementById returns null.

Though if I use the code with a div element that does not contain a select list the document.getElementById(id) returns proper div value.

How do I fix this? or is there a better way to create drop-down select menu like http://translate.google.com ?