我创建了一个 CSS3 下拉菜单，工作完美 直到我的任务是添加一个选择框来选择预设主题
然后出现了 IE 11、Edge 和 Firefox 的问题
以下只是我运行的脚本的一个非常基本的版本，但结果仍然相同
HTML:
#menu {
background: green;
}
#menu li {
list-style: none;
float: left;
padding: 5px;
}
#subMenuItems {
display: none;
background: red;
background-color: red;
}
#subMenuItems li {
float: none !important;
}
#menu li:hover #subMenuItems {
display: block;
}<div id="menu">
<ul id="menuContent">
<li>
Item 1
<ul id="subMenuItems">
<li>
<select>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
</li>
</ul>
</li>
<li>Item 2
<ul id="subMenuItems">
<li>Test1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li>
<li>Item 3
<ul id="subMenuItems">
<li>Test 1</li>
<li>
<select name="D1">
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
<option>1</option>
</select>
</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li>
</ul>
</div>复制我得到的结果: 1) 将鼠标悬停在元素 1 或元素 3 上即可查看菜单 2)在此菜单内将有一个选择 3) 单击选择箭头展开菜单 4)将鼠标光标移离菜单(使其隐藏)
在 IE 11 和 Edge 中 您应该看到选择的下拉菜单仍然可见
Firefox 将隐藏所有内容(正如它应该的那样) 但重复步骤 1 和 2 并且选择下拉菜单仍然被消耗 当您将鼠标悬停在下拉菜单中时，即使您仍然将鼠标悬停在 li 元素上，它也会隐藏菜单，并且菜单应该保持可见
我的问题: 这只是浏览器的一个错误吗？ 我的代码有错误吗？ 有什么解决方案吗？
最佳答案
这并不是 select 函数的一个很好的用途，因为它是一个 form-element-submit 元素。
select 是为表单创建的，以便某人可以加载选择并提交。
我想您可以在菜单结构中使用选择，但它需要包含鼠标事件，以便选择操作有一些事情要做。
this is the code I played with:
<!DOCTYPE html>
<html>
<head>
<style>
#menu {
background: green;
}
#menu li {
list-style: none;
float: left;
padding:5px;
}
#subMenuItems {
display: none;
background-color: red;
}
#subMenuItems li {
float: none !important;
}
#subMenuItems li:hover {
color: yellow;
background-color: black;
}
#menu li:hover #subMenuItems {
display: block;
}
</style>
</head>
<body>
<div id="menu">
<ul id="menuContent">
<li>
Item 1
<ul id="subMenuItems">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li>Item 2
<ul id="subMenuItems">
<li>Test1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</li>
<li>Item 3
<ul id="subMenuItems">
<li>a</li>
<select name="D1">
<option onclick='Javscript:alert("box1")'>1</option>
<option onclick='Javscript:alert("box2")'>2</option>
<option onclick='Javscript:alert("box3")'>3</option>
</select>
<li>b</li>
<li>c</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
关于CSS3 菜单和选择菜单 - 在 IE 和 Firefox 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39489835/