html - Chrome Ubuntu 中的下拉菜单 CSS 和选择标签

标签 html css google-chrome ubuntu web

大家好,我有一些问题想和你们一样!

我在 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 尝试在选择选项单击事件后恢复悬停状态。此过程在更改事件之后运行,因此您可以通过使用全局类和 setTimeout() 的小技巧来防止异常。

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

关于html - Chrome Ubuntu 中的下拉菜单 CSS 和选择标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24385280/

相关文章:

javascript - 如何在交互式 map 上使用自定义选项填充谷歌地图自动完成搜索结果?

CSS 移除子类的父类

css - 如何配置 cssnano 进行 CSS 缩小?

javascript - 系统跟踪错误。未捕获的安全错误 : Failed to execute 'pushState' on 'History'

javascript - chrome中如何获取当前事件元素?

javascript - Parent 中的 AddEventListener 和 iframe 中的 postMessage 不能一起工作

html - 根据屏幕大小按比例调整文本大小

javascript - 每次 iframe 加载页面时显示加载 gif

css - 在 Firefox 中删除额外的按钮间距/填充

javascript - 仅 Chrome 错误 : XMLHttpRequest cannot load file URL No 'Access-Control-Allow-Origin' header is present on the requested resource