Html 谷歌浏览器<；选择>；缺陷

当我从select标记中单击一个选项时，other div将获得悬停状态。 这只有在Windows8、7和XP的谷歌浏览器下才会发生。 在Chrome for mac中，它运行良好。 在Firefox中，Safari和IE也在Windows中。。。甚至在IE8中

<div class="wrapper">
<div class="menu">
    <ul>
        <li><a class="hide" href="">Menu 1</a>
        </li>
        <li><a class="hide">Menu 2</a>
            <ul>
                <li><a class="hide">Sub menu  1</a>
                    <ul>
                        <li><a href="">Sub item 1</a></li>
                        <li><a href="">Sub item 3</a></li>
                        <li><a href="">Sub item 3</a></li>
                    </ul>
                </li>
                <li><a class="hide">Sub menu 2</a>
                    <ul>
                        <li><a href="">Sub item 1</a></li>
                        <li><a href="">Sub item 2</a></li>
                        <li><a href="">Sub item 3</a></li>
                        <li><a href="">Sub item 4</a></li>
                        <li><a href="">Sub item 5</a></li>
                    </ul>

                </li>
                <li><a class="hide">Sub menu 3</a>
                    <ul>
                        <li><a href="">Sub item 1</a></li>
                        <li><a href="">Sub item 2</a></li>
                    </ul>
                </li>
                <li><a href="">Sub menu 4</a></li>
                <li><a href="">Sub menu 5</a></li>
                <li><a href="">Sub menu 6</a></li>
            </ul>
        </li>
    </ul>
</div>
<table width="100%">
    <tbody>
        <tr>
            <td>
                <select class="ComboLetra11" style="width:80px;">
                  <option selected="selected" value="__">Select 01</option>
                  <option value="01">ASD 01</option>
                  <option value="02">ASD 02</option>
                  <option value="03">ASD 03</option>
                  <option value="04">ASD 04</option>
                  <option value="05">ASD 05</option>
                </select>
            </td>
            <td>
                <select class="ComboLetra11" style="width:120px;">
                    <option selected="selected" value="__">Select 02</option>
                    <option value="M3">Option 1</option>
                    <option value="AR">Option 2</option>
                    <option value="AA">Option 3</option>
                    <option value="AU">Option 4</option>
                    <option value="AV">Option 5</option>
                    <option value="G3">Option 6</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
</div>

选择01
ASD 01
ASD 02
ASD 03
ASD 04
ASD 05
选择02
选择1
选择2
选择3
选择4
备选案文5
备选案文6

我举了一个例子，你可以看到，如果你点击“选择02”标签中的第2和第3个选项，“菜单2”的：悬停状态被激活

---

好的，我可以为此创建一个解决方案。 在菜单的父元素上，放置以下内容：

onmouseover=“document.getElementById（'UL的ID'）.style.zIndex='1'；”

onmouseout=“document.getElementById（'UL的ID'）.style.zIndex='-1'；“

然后在该元素之后的下一个元素上，将其反向放置：

onmouseover=“document.getElementById（'ID OF UL'）.style.zIndex='-1'；”

onmouseout=“document.getElementById（'ID OF UL'）。style.zIndex='1'；“

显然，您可能需要根据所使用页面的结构对其进行一些更改。但基本上，当您不使用菜单时，它的z索引应该为-1。不要忘记你需要一个相对或绝对的位置

---

不太漂亮，但我只是花了20个小时试图解决这个问题，我几乎找不到任何人对此抱怨，更不用说更干净的解决方案了。

好的，我能够为此创建一个解决方案。 在菜单的父元素上，放置以下内容：

onmouseover=“document.getElementById（'UL的ID'）.style.zIndex='1'；”

onmouseout=“document.getElementById（'UL的ID'）.style.zIndex='-1'；“

然后在该元素之后的下一个元素上，将其反向放置：

onmouseover=“document.getElementById（'ID OF UL'）.style.zIndex='-1'；”

onmouseout=“document.getElementById（'ID OF UL'）。style.zIndex='1'；“

显然，您可能需要根据所使用页面的结构对其进行一些更改。但基本上，当您不使用菜单时，它的z索引应该为-1。不要忘记你需要一个相对或绝对的位置

---

不漂亮，但我花了20个小时试图解决这个问题，我几乎找不到任何人对此抱怨，更不用说更干净的解决方案了。

我也面临完全相同的问题Nope，在Chrome 44中对我很好你的Chrome版本是什么？因为，我在Windows8.1和Chrome44.0.2403.157上-我看不到你的钢笔有任何这样的问题！一切似乎都很顺利，我也是。我没有看到任何奇怪的事情我也面临着完全相同的问题Nope，在Chrome44中对我很好你的Chrome版本是什么？因为，我在Windows8.1和Chrome44.0.2403.157上-我看不到你的钢笔有任何这样的问题！一切似乎都很顺利，我也是。我没有看到任何奇怪的事情发生