Zeigen Sie Untermenüs beim Hover an und öffnen Sie den Link beim Klicken

Lesezeit: 2 Minuten

Benutzer3678230

Ich habe eine WordPress-Seite erstellt. Wenn ich im Kopfzeilenmenü auf die Seite klicke, gelange ich zu diesem Seiteninhalt. Aber wenn ich es bewege, passiert nichts. Ich möchte, dass die Untermenüs beim Hover angezeigt werden.

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

Atlas_Gondal

Der HTML-Code für das Untermenü war falsch. Sie müssen das Untermenü starten <ul> im Elternmenü li.

Hier ist ein Beispiel:

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

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>

9980800cookie-checkZeigen Sie Untermenüs beim Hover an und öffnen Sie den Link beim Klicken

#CSS #html #WordPress