当用户将鼠标悬停在菜单中的某个链接上时,会显示菜单背后的背景。这个错误的渲染仅在Chrome中,并且只在一台特定的PC上进行,所以对我和我试过的其他计算机进行调试有点困难,它没有问题。
在图片上,您可以看到当将鼠标悬停在菜单项上时,菜单后面的地图可见。但它不仅是地图,也是它下面的任何东西。悬停时菜单项的文本是可见的,具有白色背景,可以单击它。只有它周围的一些区域被破坏了。
我正在使用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>
}