gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 18:07:42 25 4
gpt4 key购买 nike

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

我在 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com