Untermenü nicht herunterfallen, sondern neben geordneten Menü erscheint

Question

ich eine Blogger-Vorlage vorbereite. Und das Navigationsmenü schafft Probleme. Untermenü erscheint neben dem übergeordneten Menü. Aber nicht fallen. Werfen Sie einen Blick auf testblogorfy.blogspot.com. Ansicht CSS über „Quelltext“ -> #menu oder „Kopfnavigation“

Answer 1

Sie können diesen Link für weitere Klärung lesen https://www.w3schools.com/css/css_dropdowns.asp.

Für Ihre Unterstützung Ich habe den gleichen Code aus dem obigen Link einzufügen. Grundsätzlich für das Untermenü, müssen Sie eine andere verschachtelte innerhalb der li-Element erstellen.

HTML

<ul> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#news">News</a></li> 
     <li class="dropdown"> 
     <a href="javascript:void(0)" class="dropbtn">Dropdown</a> 
     <div class="dropdown-content"> 
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
     </div> 
     </li> 
    </ul> 

CSS

ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
    } 

    li { 
     float: left; 
    } 

    li a, .dropbtn { 
     display: inline-block; 
     color: white; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

    li a:hover, .dropdown:hover .dropbtn { 
     background-color: red; 
    } 

    li.dropdown { 
     display: inline-block; 
    } 

    .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: #f9f9f9; 
     min-width: 160px; 
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
     z-index: 1; 
    } 

    .dropdown-content a { 
     color: black; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
     text-align: left; 
    } 

    .dropdown-content a:hover {background-color: #f1f1f1} 

    .dropdown:hover .dropdown-content { 
     display: block; 
    }