Question

我正在尝试使用自定义css创建一个下拉选择菜单（类似于http://translate.google.com/#处的语言下拉选项）。

我有当前的HTML代码：

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

和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';

}

但是document.getElementById返回null。

虽然如果我使用带有不包含选择列表的div元素的代码，document.getElementById（id）将返回正确的div值。

我该如何解决这个问题？或者有更好的方法来创建下拉选择菜单，如http://translate.google.com？

Answer 1

你已将div放在select标签内。我不确定这是否有效，请尝试将div移到select标签之外。就更好的方式而言，您提供的链接下拉列表根本没有使用选择标记。它的风格简单，看起来像一个下拉菜单，并使用隐藏的div与其中的所有链接。我希望这有帮助！ - ＆GT;这里有一些免费的代码可以帮助您入门。 CSS三角技巧不收取额外费用;）

<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（假设您正在使用jQuery）

$(document).ready(function(){

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

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

});

JSfiddle example

Answer 2

如果您想要Google翻译的下拉菜单，请查看源代码！没有<select>元素。它几乎完全是CSS。

http://jsfiddle.net/mattball/BA4v3/1/

Answer 3

那是因为您无法在div代码中嵌套select代码。

谷歌的花哨下拉根本不是select标记，它是一组div元素，使用适当的Javascript来完成类似于经典select元素的内容。

为了解决这个问题，你需要更改一下你的标记。

Answer 4

这里有一堆链接到jQuery插件/教程，用于创建自定义下拉菜单。

Answer 5

检查alert（id）的值：

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

document.getElementById为我的下拉选择菜单返回null

5 个答案: