在悬停时显示子菜单并在单击时打开链接答案

【问题标题】：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 内启动子菜单<ul>。

这是一个示例：

.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>

【讨论】：