【问题标题】:Display Submenus on hover and open link on Click在悬停时显示子菜单并在单击时打开链接
【发布时间】:2022-02-15 22:46:12
【问题描述】:

我创建了一个 wordpress 页面。当我单击页面时,在标题菜单上,它会将我带到该页面内容。但是当我悬停它时,什么也没有发生。我希望子菜单出现在悬停时。

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown:hover {
  display: block;
}

.nav navbar-nav navbar-left:hover {
  display: block;
}
<ul id="menu-header-menu-left" class="nav navbar-nav navbar-left"> <a href="">Dental Services</a></li>
  <li class="dropdown ">

    <ul class="dropdown-menu total-11 sub-left">
      <li><a href="">BLEACHING</a></li>
      <li><a href="">BONE GRAFT</a></li>
      <li><a href="">CHILDREN DENTISTRY</a></li>
      <li><a href="">CLEANING</a></li>

    </ul>
  </li>
</ul>

【问题讨论】:

    标签: html css wordpress


    【解决方案1】:

    子菜单的 HTML 代码错误。您需要在父菜单li 内启动子菜单&lt;ul&gt;

    这是一个示例

    .dropdown-menu {
      position: relative;
      display: none;
    }
    
    #submenu:hover > ul {
      display: block;
     }
    
    .nav navbar-nav navbar-left:hover {
    
     display:block;
    
     }
    <ul id="menu-header-menu-left" class="nav navbar-nav navbar-left">
      <li id="submenu">
        <a href="">Dental Services</a>
    
        <ul class="dropdown-menu total-11 sub-left">
          <li><a href="">BLEACHING</a></li>
          <li><a href="">BONE GRAFT</a></li>
          <li><a href="">CHILDREN DENTISTRY</a></li>
          <li><a href="">CLEANING</a></li>
        </ul>
      </li>
    </ul>

    【讨论】:

      【解决方案2】:

      css

      .dropdown-menu {position: relative; display: none;} #submenu:hover ul {display: block;} .nav.navbar-nav.navbar-left:hover {display:block;}
      

      HTML

      <ul id="menu-header-menu-left" class="nav navbar-nav navbar-left">
      

      <ul class="dropdown-menu total-11 sub-left">
        <li><a href="">BLEACHING</a></li>
        <li><a href="">BONE GRAFT</a></li>
        <li><a href="">CHILDREN DENTISTRY</a></li>
        <li><a href="">CLEANING</a></li>
      </ul>
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-05-25
        • 2014-01-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-02-25
        相关资源
        最近更新 更多