Question

我创建了一个wordpress页面。单击页面时，在页眉菜单上，它会转到该页面内容。但是当我将它悬停时，没有任何反应。我希望子菜单显示在悬停状态。

＆＃13;

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown:hover {
  display: block;
}

.nav navbar-nav navbar-left:hover {
  display: block;
}

＆＃13;

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

＆＃13;

Answer 1

子菜单的HTML代码错误。您需要在父菜单<ul>内启动子菜单li。

以下是示例：

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

希望它有所帮助！：）

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

单击时显示悬停和打开链接上的子菜单

2 个答案: