【问题标题】:Mousehover not working in google chrome 45 css鼠标悬停在 google chrome 45 css 中不起作用
【发布时间】:2015-09-10 14:07:33
【问题描述】:

当悬停在li 上时,我想显示一个子ulsubmenu。为此,我编写了以下 CSS 代码。以下代码适用于除 Google Chrome 45 以外的所有浏览器。

    nav .sub-menu li:hover .sub-menu{ display:block;}

我的 HTML 代码是

    <ul id="menu-main-menu" class="menu">
    <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-49"><a href="http://natcopharma.co.in/">Home</a></li>

   <li id="menu-item-693" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-693"><a href="#">Products</a>
     <ul class="sub-menu">
       <li id="menu-item-758" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-758"><a href="#">Domestic Formulations</a>
       <ul class="sub-menu">
          <li id="menu-item-101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-101"><a href="http://natcopharma.co.in/products/domestic-formulations/oncology-hematology/">Oncology – Hematology</a></li>
          <li id="menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-100"><a href="http://natcopharma.co.in/products/domestic-formulations/oncology-solid-tumors/">Oncology – Solid Tumors</a></li>
         <li id="menu-item-99" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-99"><a href="http://natcopharma.co.in/products/domestic-formulations/speciality-pharma/">Speciality Pharma</a></li>
       </ul>
     </li>
    <li id="menu-item-105" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-105"><a href="http://natcopharma.co.in/products/international-formulations/">International Formulations</a></li>
  </ul>
 </li>
 <li id="menu-item-694" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-694"><a href="#">Innovation</a>
 <ul class="sub-menu">
 <li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322"><a href="http://natcopharma.co.in/innovation/analytical/">Analytical</a></li>
<li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-323"><a href="http://natcopharma.co.in/innovation/generic-research/">Generic Research</a></li>
<li id="menu-item-324" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-324"><a href="http://natcopharma.co.in/innovation/intellectual-property/">Intellectual Property</a></li>
<li id="menu-item-325" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-325"><a href="http://natcopharma.co.in/innovation/new-drug-discovery/">New Drug Discovery</a></li>
<li id="menu-item-326" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-326"><a href="http://natcopharma.co.in/innovation/opportunities/">Opportunities</a></li>
  </ul>
   </li>
   <li id="menu-item-347" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-347"><a href="http://natcopharma.co.in/global/">Global</a></li>
  </ul>

这是小提琴http://jsfiddle.net/ubpcjr97/

【问题讨论】:

标签: javascript jquery html css google-chrome


【解决方案1】:

不,它有效。我现在已经在 Chrome 45 中对其进行了测试。

【讨论】:

    【解决方案2】:

    它在我的浏览器中运行,但你也可以试试这个:

    nav .sub-menu li:hover > .sub-menu{ display:block;}
    

    【讨论】:

      猜你喜欢
      • 2014-10-28
      • 2015-08-08
      • 2015-04-04
      • 1970-01-01
      • 2023-04-08
      • 1970-01-01
      • 2016-05-16
      • 2023-03-12
      • 1970-01-01
      相关资源
      最近更新 更多