Chrome Ubuntu 中的下拉菜单 CSS 和选择标签答案

【问题标题】：Dropdown Menu CSS and Select tag in Chrome UbuntuChrome Ubuntu 中的下拉菜单 CSS 和选择标签
【发布时间】：2014-08-14 15:15:36
【问题描述】：

大家好，我有一些问题想和大家一样！

我在 CSS 中创建了一个下拉菜单，并在菜单下方创建了一个选择标签选项，但是当我尝试在选择标签中选择某些选项时，下拉菜单的子菜单会显示出来。我不想显示子菜单。

你有什么想法吗？下面是我的代码

CSS：

ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    background: #666;
    padding: 5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}

HTML：

<html>
<head>
<link rel="stylesheet" type="text/css" href="s.css">
</head>
    <ul id="menu">
        <li><a href="#">Menu 1</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Menu 1</a></li>
                <li><a href="#">Sub Menu 2</a></li>
                <li><a href="#">Sub Menu 3</a></li>
                <li><a href="#">Sub Menu 4</a></li>
            </ul></li>

    </ul>
    <select name="Denomination" tabindex="0" title="" alt="">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
        <option>9</option>
        <option>10</option>
        <option>11</option>
        <option>12</option>

    </select>
</html>

谢谢！！！！

【问题讨论】：

您的代码在 chrome 中运行良好。 jsfiddle.net/sureshponnukalai/RKTBV哪个浏览器有这个问题？
@SureshPonnukalai：操作系统 Ubuntu 中的 Chrome。您可以尝试单击其中的某个选项。对于我来说，我点击选项 4 并显示下拉菜单的子菜单！

标签： html css google-chrome ubuntu web

【解决方案1】：

当然，这是一个错误。 Chrome 会在选择选项单击事件后尝试恢复悬停状态。此过程在更改事件之后运行，因此您可以通过全局类和setTimeout() 的小技巧来防止异常。

查看我对同一问题的回答here。

【讨论】：