I am trying to create a drop-down select menu with custom css (similar to the drop-down selection of language at ).

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 ?

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./#).

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. ?

• javascript
• html
• select

• 2 The drop-down menus on the site you linked to aren't actually HTML select elements - they're made to look and behave like that using JavaScript/CSS. You'll probably be able to find JavaScript libraries, jQuery plugins and the like that will let you do this with minimal effort. – no.good.at.coding Commented Mar 18, 2011 at 16:14

5 Answers 5

You've got your div placed inside of the select tag. I'm not sure this is valid, try moving the div outside of the select tag. As far as a better way, the dropdown at the link you've provided isn't using a select tag at all. It is simply styled to look like a dropdown menu, and is using a hidden div with all of the links inside of it. I hope this helps! --> here's some free code to get you started. The CSS triangle trick es at no extra charge ;)

<div id='fakeDropdown'>
    <div class='triangle'> </div>

  <div id='menu'>
      <a href='#'> link </a>
       <a href='#'> link </a>
       <a href='#'> link </a>
       <a href='#'> link </a>
  </div>

</div>

CSS

#fakeDropdown{
 background-color: #888;
 height: 30px;
 width: 150px;
    cursor: pointer;
}
#menu{
    display: none;
    background-color: #888;
 height: 200px;
    width: 800px;
    position: relative;
    top: 30px;
}
.triangle{
 font-size: 0px; line-height: 0%; width: 0px;
border-top: 20px solid #000;
border-left: 10px solid #888;
border-right: 10px solid #888;
float: right;
margin-top: 5px;
}

JAVASCRIPT(assuming you're using jQuery)

$(document).ready(function(){

    $('#fakeDropdown').hover(function(){
       $(this).find('#menu').show('fast');
    });

    $('#fakeDropdown').mouseleave(function(){
        $(this).find('#menu').hide('fast');
    });

});

JSfiddle example

If you want a dropdown like Google Translate's, just look through the source code! There is no <select> element. It's almost entirely CSS.

http://jsfiddle/mattball/BA4v3/1/

That's because you can't nest a div tag within a select tag.

Google's fancy drop down is not a select tag at all, it's a set of div elements with the appropriate Javascript to acplish something similar to a classic select element.

You'll need to change up your markup a bit for this to work out.

Here's a bunch of links to jQuery plugins/tutorials for creating custom drop-down menus.

• http://vandelaydesign./blog/web-development/jquery-drop-down-menus/
• http://www.hv-designs.co.uk/tutorials/sliding_menu/sliding_menu.html
• http://www.filamentgroup./lab/jquery_ipod_style_and_flyout_menus/

check the value of alert(id):

alert(id);
ddmenuitem = document.getElementById(id);