Horizontal schwebendes Navigationsmenü

Question

Ich bin ziemlich neu in HTML und CSS. Ich habe ein horizontales Menü erstellt und die Dropdown-Menüs bewegen sich so, wie sie sollten.

Allerdings möchte ich das Drop-Down nur erscheinen, wenn die Maus über die Links schwebt, und nicht das Leerzeichen darunter, das den eigentlichen Drop-Down-Inhalt belegt.

Wenn jemand bitte darauf hinweisen kann, warum das passiert und wie ich es beheben könnte, wäre das großartig.

Hier ist das HTML und CSS.

nav{ 
 

 
    text-align:center; 
 
    font-family:myFirstFont; 
 
    display:inline-block; 
 
    position:absolute; 
 
    left:320px; 
 
    top:56px; 
 
} 
 

 
.navigation { 
 
    list-style-type:none; 
 
    word-spacing:50px; 
 
    max-width:100%; 
 
    font-size:1.2em; 
 
    position:relative; 
 

 
} 
 

 
.navigation li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
.navigation a{ 
 
    text-decoration:none; 
 
    color:#00a8e7; 
 
} 
 

 
    
 
.navigation ul { 
 
    position:absolute; 
 
    text-align:justify; 
 

 
} 
 

 
.navigation ul li { 
 
    display:block; 
 
    position:relative; 
 
    right:40px; 
 
    opacity:0; 
 
    visibility:hidden; 
 
} 
 

 
.navigation li:hover ul li{ 
 
    opacity:1; 
 
    visibility:visible; 
 
}

<nav> 
 
      <ul class="navigation"> 
 
       <li><a href="#">ABOUT</a> 
 
       <ul> 
 
        <li><a href="#">COMPANY</a></li> 
 
        <li><a href="#">TEAM</a></li> 
 
       </ul> 
 
       
 
       </li> 
 
       <li><a href="#">SERVICES</a> 
 
        <ul> 
 
         <li><a href="#">WEBSITE</a></li> 
 
         <li><a href="#">SEO</a></li> 
 
         <li><a href="#">LOGO</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">PORTFOLIO</a> 
 
        <ul> 
 
         <li><a href="#">WEBSITES</a></li> 
 
         <li><a href="#">LOGO DESIGN</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">CONTACT</a> 
 
        <ul> 
 
         <li><a href="#">PHONE</a></li> 
 
         <li><a href="#">EMAIL</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">TESTIMONIALS</a></li> 
 
      </ul> 
 
     </nav>

Answer 1

nav{ 
 

 
    text-align:center; 
 
    font-family:myFirstFont; 
 
    display:inline-block; 
 
    position:absolute; 
 
    left:320px; 
 
    top:56px; 
 
} 
 

 
.navigation { 
 
    list-style-type:none; 
 
    word-spacing:50px; 
 
    max-width:100%; 
 
    font-size:1.2em; 
 
    position:relative; 
 

 
} 
 

 
.navigation li { 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
.navigation a{ 
 
    text-decoration:none; 
 
    color:#00a8e7; 
 
} 
 

 
    
 
.navigation ul { 
 
    position:absolute; 
 
    text-align:justify; 
 

 
} 
 

 
ul.inner li { 
 
    display:none; 
 
    position:relative; 
 
    right:40px; 
 
    
 
    
 
} 
 

 
.navigation li:hover ul.inner li{ 
 
    display:block 
 
}

<nav> 
 
      <ul class="navigation"> 
 
       <li><a href="#">ABOUT</a> 
 
       <ul class="inner"> 
 
        <li><a href="#">COMPANY</a></li> 
 
        <li><a href="#">TEAM</a></li> 
 
       </ul> 
 
       
 
       </li> 
 
       <li><a href="#">SERVICES</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">WEBSITE</a></li> 
 
         <li><a href="#">SEO</a></li> 
 
         <li><a href="#">LOGO</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">PORTFOLIO</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">WEBSITES</a></li> 
 
         <li><a href="#">LOGO DESIGN</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">CONTACT</a> 
 
        <ul class="inner"> 
 
         <li><a href="#">PHONE</a></li> 
 
         <li><a href="#">EMAIL</a></li> 
 
        </ul> 
 
       </li> 
 
       <li><a href="#">TESTIMONIALS</a></li> 
 
      </ul> 
 
     </nav>

Answer 2

versuchen, die wichtigsten li Elemente (About, Dienstleistungen, Portfolio ...) die class = "top" zu geben. Bearbeiten Sie die CSS-Datei anschließend in .top.li: hover ul li {...}.