Schweben über Navigationsleiste

Question

Ich habe eine Navigationsleiste mit einer Subnavigation, aber wenn ich über einen bestimmten Teil der Navigation schweben, öffnet sich das Untermenü auf eine sehr seltsame Art und Weise. Hier ist mein Code:

#menu { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    width: 715px; 
 
    margin-left: 600px; 
 
    font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
    border-radius: 4px; 
 
} 
 
#menu ul li { 
 
    display: inline-block; 
 
    padding: 15px; 
 
    margin-left: 90px; 
 
} 
 
#menu ul li a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
/* Sub-menu */ 
 

 
#menu ul ul { 
 
    display: none; 
 
} 
 
#menu ul li:hover > ul { 
 
    display: block; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
 
    \t <ul class="sub-menu"> 
 
    \t \t <li><a href="ru.html">Russisch</a></li> 
 
     </ul> 
 
     </a> 
 
    </li> 
 
    <li><a href="contact.html">Contact</a></li> 
 
    </ul> 
 
</nav>

Es soll unter dem "Projecten" Tab öffnen, aber tut dies: problem

Answer 1

Das ist, weil Sie ein Element zum Menü hinzufügen, sobald Sie etwas display: none;-display: block; gesetzt. Das wird alles über den Strich ziehen und es so aussehen lassen.

Die Lösung ist position: absolute;, um das Untermenü aus dem Fluss der Website zu entfernen. Ich werde Ihnen ein Beispiel, Ihr Code verwendet:

#menu { 
 
     background-color: rgba(0,0,0,0.6); 
 
     width: 715px; 
 
     margin-left: 600px; 
 
     font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
     border-radius: 4px; 
 
    } 
 
    
 
    #menu ul li { 
 
     display: inline-block; 
 
     padding: 15px; 
 
     margin-left: 90px; 
 
     position: relative; /* This is needed to be able to set 
 
          the submenu relative to it's parent item */ 
 
    } 
 
    
 
    #menu ul li a { 
 
     text-decoration: none; 
 
     color: #FFF; 
 
    
 
    } 
 
    
 
    /* Sub-menu */ 
 
    
 
    #menu ul ul { 
 
     display: none; 
 
     /* Here we'll place it at the bottom of the menu item */ 
 
     position: absolute; 
 
     top: 100%; /* This should equal the bottom of the item */ 
 
     left: 0; /* To put it at the left side of the item */ 
 
     /** And some basic styling to make it visible */ 
 
     background: rgba(0,0,0,0.6); 
 
    } 
 
    
 
     #menu ul li:hover > ul { 
 
      display:block; 
 
     }

<nav id="menu"> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">Home</a></li> 
 
    \t \t \t \t <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i></a> 
 
    \t \t \t \t <ul class="sub-menu"> 
 
    \t \t \t \t \t <li><a href="ru.html">Russisch</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t \t </li> 
 
    \t \t \t \t <li><a href="contact.html">Contact</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav>

ich diese Hoffnung werde klären genug, damit Sie Ihre Arbeit fortzusetzen.

BEARBEITEN: Auch das HTML gelöscht. Sie sollten keinen neuen UL in einem Link öffnen.

Answer 2

Verwendung Positionierung. Hier ist wie:

• Fügen Sie position: relative zu den li Elemente hinzu.
• Fügen Sie position: absolute zur zweiten Ebene ul Element hinzu.
• Fügen Sie eine Hintergrundfarbe zur zweiten Ebene hinzu ul Element.

Dies wird als Dropdown-Menü angezeigt.

Arbeitsbeispiel:

#menu { 
 
     background-color: rgba(0,0,0,0.6); 
 
     width: 715px; 
 
     margin-left: 600px; 
 
     font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; 
 
     border-radius: 4px; 
 
    } 
 
    
 
    #menu ul li { 
 
     display: inline-block; 
 
     padding: 15px; 
 
     margin-left: 90px; 
 
     position: relative; /*Added this*/ 
 
    
 
    } 
 
    
 
    #menu ul li a { 
 
     text-decoration: none; 
 
     color: #FFF; 
 
    
 
    } 
 
    
 
    /* Sub-menu */ 
 
    
 
    #menu ul ul { 
 
     display: none; 
 
     background-color: rgba(0,0,0,0.6); /*added this*/ 
 
     position: absolute; /*and this*/ 
 
     /*These two are positioning the dropdown relative to the bottom left corner of the parent item*/ 
 
     left: 0; 
 
     top: 100%; 
 
    } 
 
    
 
    #menu ul li:hover > ul { 
 
     display:block; 
 
    }

<nav id="menu"> 
 
    \t \t \t <ul> 
 
    \t \t \t \t <li><a href="#">Home</a></li> 
 
    \t \t \t \t <li><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
 
    \t \t \t \t <ul class="sub-menu"> 
 
    \t \t \t \t \t <li><a href="ru.html">Russisch</a></li> 
 
    \t \t \t \t </ul> 
 
    \t \t \t \t </a></li> 
 
    \t \t \t \t <li><a href="contact.html">Contact</a></li> 
 
    \t \t \t </ul> 
 
    \t \t </nav>

Answer 3

/* edit by Manish*/ 
.sub-menu { 
    background: #333 none repeat scroll 0 0; 
    left: 0; 
    position: absolute; 
    right: 0; 
    top: 49px; 
} 
.parent{ 
    position: relative; 
} 
/* edit by Manish*/ 

Add "Eltern" Klasse Eltern "li"

<nav id="menu"> 
        <ul> 
         <li><a href="#">Home</a></li> 
         <li class="parent"><a href="#">Projecten<i class="material-icons" style="font-size:15px">arrow_drop_down</i> 
         <ul class="sub-menu"> 
          <li><a href="ru.html">Russisch</a></li> 
         </ul> 
         </a></li> 
         <li><a href="contact.html">Contact</a></li> 
        </ul> 
       </nav>