css - chrome悬停不下拉菜单

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，你明白我在说什么。