-1

これが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アフターを配​​置すると機能することです。ulli

4

1 に答える 1

0 
    .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だからです。left:-92x を 100px に変更すると、私の言っていることがわかります。

于 2013-02-28T12:40:08.197 に答える