将鼠标悬停在导航栏项目上可显示z-index较低的内容

时间:2017-08-07 07:43:22

标签: html css twitter-bootstrap google-chrome z-index

当用户将鼠标悬停在菜单中的某个链接上时,会显示菜单背后的背景。这个错误的渲染仅在Chrome中,并且只在一台特定的PC上进行,所以对我和我试过的其他计算机进行调试有点困难,它没有问题。

在图片上,您可以看到当将鼠标悬停在菜单项上时,菜单后面的地图可见。但它不仅是地图,也是它下面的任何东西。悬停时菜单项的文本是可见的,具有白色背景,可以单击它。只有它周围的一些区域被破坏了。

enter image description here

我正在使用Yamm megamenu for Bootstrap

和标准的Bootstrap 3.3下拉菜单。

这是菜单代码的一部分(它是在php中生成的,因为它是yii的插件)

using (var reader = new StreamReader(tcpClient.GetStream()))
{
    while (true)
    {
        var line = reader.ReadLine();
        headerResponse += line + "\r\n";
        if (line == "")
            break;
    }
    using (var fileStreamReader = tcpClient.GetStream())
    {
        byte[] bytes = new byte[1024];
        var readCount = fileStreamReader.Read(bytes, 0, bytes.Length);
    }
}

的CSS

<div class="collapse navbar-collapse" id="yw4">
<ul id="yw2" class="nav navbar-nav" role="menu">
  <li><a tabindex="-1" href="#">Menu item</a></li>
  <li class="dropdown open">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu item megamenu <b class="caret"></b></a>
     <ul class="dropdown-menu" id="yt2" aria-labelledby="yt2" role="menu">
        <li class="dropdown-header">
           <!-- Content container to add padding -->
           <div class="yamm-content">
              <div class="row">
                 <ul class="col-sm-2 list-unstyled">
                    <li>
                       <p><strong>Megamenu subheader</strong></p>
                    </li>
                    <li>
                       <table>
                          <tbody>
                             <tr>
                                <td style="width:30px">
                                   <div class="imgs"></div>
                                </td>
                                <td style="max-width:90px">
                                   <a href="#">Menu item with problems</a>
                                </td>
                             </tr>
                          </tbody>
                       </table>
                    </li>
                 </ul>
              </div>
           </div>
        </li>
     </ul>
  </li>
  <li visible="1"><a tabindex="-1" href="">Other menu item</a></li>
  <li><a tabindex="-1" href="">Other menu item</a></li>
  <li><a tabindex="-1" href="">Other menu item</a></li>
   </ul>
</div>

}

0 个答案:

没有答案