Ausrichten Dropdown-Nav zum Hauptmenü mit CSS

Ich habe eine CSS-Drop-down-Nav-Technik, die ich häufig verwende. Hier ist die vereinfachte HTML:Ausrichten Dropdown-Nav zum Hauptmenü mit CSS

<ul id="nav"> 
    <li><a href="#">Menu Item</a> 
     <span class="subnav"> 
      <a href="#">Submenu Item</a> 
      <a href="#">Submenu Item</a> 
      <a href="#">Submenu Item</a> 
     </span> 
    </li> 
</ul>

Hier ist die vereinfachte CSS:

span.subnav{display:none;} 
#nav1 li:hover span.subnav{display:block} 
#nav1 li{position:relative;} 
span.subnav{position:absolute;top:20px;left:0;}

Das Problem ist bei der Positionierung sub.subnav vertikal, wo ich oben haben: 20px. Ich brauche dieses Element genau an der Unterseite des LI-Elements. Wenn es zu hoch ist, überlappt es den Hauptmenüpunkt. Wenn es zu niedrig ist, besteht eine Lücke zwischen dem Hauptmenüpunkt und dem Sub-Nav, und wenn der Maus über diese Lücke fährt, wird das Sub-Nav unerwartet geschlossen und der Benutzer ist frustriert.

Ich kann es normalerweise genau richtig, bis auf den Pixel (in diesem Beispiel 20px). Einige Browser scheinen die Zeichensätze jedoch nicht exakt zu ändern. Die Höhe des LI-Elements wird durch die darin enthaltene Schriftart bestimmt, so dass es Unterschiede geben kann und meine 20px-Berechnung nicht korrekt ist.

Gibt es eine andere Möglichkeit in CSS, mein spannav-Element an der Unterseite des LI-Elements zu positionieren?

Vielen Dank.

Quelle

2016-09-12 BB Design

Ich denke, es ist okay, die top CSS-Eigenschaft von .subnav haben auto

#nav li { position: relative; } 
#nav li:hover span.subnav { display: block; } 
#nav li .subnav { top: auto; }

JSFiddle zu sein: https://jsfiddle.net/aam6je6m/

Quelle

2016-09-12 13:06:35

Alternativ 'top: 100%' würde auch (weil es auf die Höhe des LI Element Elternteil bezieht sich hier.) – CBroe

Whoa, es funktioniert! Dieser Hund hat heute etwas Neues gelernt. Ich danke dir sehr! –

Jetzt addiere ich verkehrt herum() und slideUp() anzeigen oder ausblenden das Drop-Down-Menü im Menü "Hover"

\t //Hide and Show The Sub Menus 
 
\t \t $(".jquery-test ul li.menu-list").hover(function(){ 
 
\t \t \t $(this).find('ul').stop().slideDown(); 
 
\t \t },function(){ 
 
\t \t \t $(this).find('ul').stop(true,true).slideUp(); 
 
\t \t });

.jquery-test ul.menu li.menu-list{display:inline-block;padding-right:20px;} 
 
.jquery-test ul{list-style:none;padding-left:10px;} 
 
.jquery-test ul.menu li.menu-list ul.submenu {display:none;} 
 
.jquery-test ul.menu li.menu-list ul.submenu{position:absolute;} 
 
.jquery-test ul.menu li.menu-list ul.submenu li{position:relative;left:0px;} 
 
.jquery-test ul li a{text-decoration:none;color:#000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="jquery-test"> 
 
\t <ul class="menu"> 
 
\t \t <li class="menu-list"><a href="#">Menu1</a> 
 
\t \t \t <ul class="submenu"> 
 
\t \t \t \t <li><a href="#">Menu1.0</a></li> 
 
\t \t \t \t <li><a href="#">Menu1.1</a></li> 
 
\t \t \t \t <li><a href="#">Menu1.2</a></li> 
 
\t \t \t \t <li><a href="#">Menu1.3</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li class="menu-list"><a href="#">Menu2</a> 
 
\t \t \t <ul class="submenu"> 
 
\t \t \t \t <li><a href="#">Menu2.1</a></li> 
 
\t \t \t \t <li><a href="#">Menu2.2</a></li> 
 
\t \t \t \t <li><a href="#">Menu2.3</a></li> 
 
\t \t \t \t <li><a href="#">Menu2.4</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t \t <li class="menu-list"><a href="#">Menu3</a> 
 
\t \t \t <ul class="submenu"> 
 
\t \t \t \t <li><a href="#">Menu3.0</a></li> 
 
\t \t \t \t <li><a href="#">Menu3.1</a></li> 
 
\t \t \t \t <li><a href="#">Menu3.2</a></li> 
 
\t \t \t \t <li><a href="#">Menu3.3</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t </ul>

Quelle

2016-09-12 13:58:59 Dhaarani

Ausrichten Dropdown-Nav zum Hauptmenü mit CSS

Antwort

Verwandte Themen