Question

我创建了一个CSS3下拉菜单，效果很好直到我的任务是添加一个选择框来选择预设主题

然后这给出了IE 11和Edge和Firefox的问题

以下只是我运行的脚本的一个非常基本的版本，但结果仍然相同

HTML：

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

复制我得到的内容： 1）将鼠标悬停在第1项或第3项上以查看菜单 2）在这个菜单里面会有一个选择 3）单击选择箭头以展开菜单 4）将鼠标光标从菜单上移开（使其隐藏）

在IE 11和Edge中您应该会看到选择中的下拉菜单仍然可见

Firefox将隐藏所有内容（应该如此）但是重复步骤1和2 而选择下拉仍然消耗当您将鼠标悬停在下拉菜单中时，它会隐藏菜单，即使您仍然悬停在li元素上，菜单仍然可见

我的问题：这只是浏览器的错误吗？我的代码有错误吗？提议的任何解决方案？

Answer 1

这不是一个很好用的select函数，因为它是一个form-element-submit元素。

选择是为表单创建的，以便有人可以加载选择以便提交表单。

我想你可以在菜单结构中使用select，但它需要包含一个鼠标事件，因此select动作可以做。

@transient val fs = FileSystem.get(new Configuration())

CSS3菜单和选择菜单 - 在IE＆amp;火狐

1 个答案: