Question

我无法弄清楚为什么这不适用于Chrome，但悬停不会显示span.sub-menu-response

.navbar .navbar-inner  .nav-collapse > ul > li > span.sub-menu-response {
display: none;
background: #F8F8F8;
position: absolute;
z-index: 5;
border: 1px solid #9da3a7;
margin-top: 6px;
margin-left: 0px !important; 
left:-92px;

}

.navbar .navbar-inner  .nav-collapse > ul > li:hover > span.sub-menu-response {
display: block;
background: #F8F8F8;
position: absolute;
z-index: 5;
border: 1px solid #9da3a7;
margin-top: 6px;
margin-left: 0px !important; 
left:-92px;
}

输出的html

<div class="navbar">
<div class="navbar-inner">

 <a data-target=".nav-collapse" data-toggle="collapse" class="brand visible-phone">
     Categories
</a>
    <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </a>
  <div class="nav-collapse collapse">
    <ul class="nav">
        <li>*content*</li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>
        Start Shopping</span><span class="active_downarrow"></span></a>
            <span class="sub-menu-response"></span>
        </li>


        <li> *content*  </li>


        <li> *content*   </li>

        <li>*content*</li>
    </ul>
</div>

</div>


</div>

编辑：陌生人是，如果我将:hover放在ul之后而不是li，那就可以了。

Answer 1

    .navbar .navbar-inner  .nav-collapse > ul > li:hover > span.sub-menu-response {
display: block;
background: #F8F8F8;
position: absolute;
z-index: 5;
border: 1px solid #9da3a7;
margin-top: 6px;
margin-left: 0px !important; 
left:-92px;
}

这是因为你的左边是-92px。改变左边：-92x到100px，你得到我说的话。

镀铬悬停不下降菜单

1 个答案: