Ich sehe nicht das Drop-Down-li

Question

Ich bin neu in HTML und CSS. Ich folge einem Tutorial in youtube. Dies ist alles über Navigationsleiste und Drop-Down in HTML und CSS.

Der Name Ria, Kezia und Gelia sollte angezeigt werden, wenn ich meine Maus in Support-Option schweben.

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    /*This will remove the bullet*/ 
 
} 
 

 
#container ul li { 
 
    background-color: #3C4794; 
 
    /*Adds a back-color.*/ 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    /*Show the text in the middle*/ 
 
    float: left; 
 
    color: white; 
 
    /*Font color*/ 
 
    font-size: 18px; 
 
} 
 

 
#container ul li:hover { 
 
    background-color: #388222; 
 
    /*Change the color when hovering the mouse.*/ 
 
}

<div id="container"> 
 
    <ul> 
 
    <li>Support</li> 
 
    <ul> 
 
     <li>Ria</li> 
 
     <li>Kezia</li> 
 
     <li>Gelia</li> 
 
    </ul> 
 
    <li>CCD</li> 
 
    <li>Scanning</li> 
 
    <li>Claims</li> 
 
    </ul>

Answer 1

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    /*This will remove the bullet*/ 
 
} 
 

 
#container ul li { 
 
    background-color: #3C4794; 
 
    /*Adds a back-color.*/ 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    /*Show the text in the middle*/ 
 
    float: left; 
 
    color: white; 
 
    /*Font color*/ 
 
    font-size: 18px; 
 
} 
 

 
#container ul li:hover { 
 
    background-color: #388222; 
 
    /*Change the color when hovering the mouse.*/ 
 
} 
 

 
#container ul li ul { 
 
    display: none; 
 
    z-index: 100; 
 
    position: relative; 
 
} 
 

 
#container ul li:hover ul { 
 
    display: block; 
 
}

<div id="container"> 
 
    <ul> 
 
    <li>Support 
 
     <ul> 
 
     <li>Ria</li> 
 
     <li>Kezia</li> 
 
     <li>Gelia</li> 
 
     </ul> 
 
    </li> 
 
    <li>CCD</li> 
 
    <li>Scanning</li> 
 
    <li>Claims</li> 
 
    </ul> 
 
</div>

Answer 2

Sie benötigen Untermenü in li Element zu platzieren und sie durch CSS verstecken, dann können Sie Stile für pseudo-Klasse schreiben, wenn Sie möchten, dass Untermenü im Schwebeflug zu erscheinen

Also, zuerst, dass Sie brauchen, bewegen Sie inner ul Element in li, so:

 <li>Support 
      <ul> 
       <li>Ria</li> 
       <li>Kezia</li> 
       <li>Gelia</li> 
      </ul> 
     </li> 

Weiter müssen Sie richtige Stile festlegen.

1. li brauchen Lage haben: relative, diese innere ul-Element nehmen Sie die richtige Position lassen wird

2. Inner ul von Standardzustand ausgeblendet werden sollen und auf schweben auf Elternelement sehen sein;

sollten Diese Arten helfen:

ul > li { 
    position: relative; 
} 

li > ul { 
    display: none; 
    bottom: 0; 
    left: 0; 
} 

li:hover > ul { 
    display: block 
} 

Answer 3

Sie haben einige CSS-Eigenschaft für Dropdown-Liste hinzufügen. Hier können Sie Code bearbeitet wurde

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    /*This will remove the bullet*/ 
 
} 
 

 
#container ul li { 
 
    background-color: #3C4794; 
 
    /*Adds a back-color.*/ 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    /*Show the text in the middle*/ 
 
    float: left; 
 
    color: white; 
 
    /*Font color*/ 
 
    font-size: 18px; 
 
} 
 

 
#container ul li:hover { 
 
    background-color: #388222; 
 
    /*Change the color when hovering the 
 
     mouse.*/ 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

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

<div id="container"> 
 
    <ul> 
 
    <li class="dropdown">Support 
 
     <ul class="dropdown-content"> 
 
     <li>Ria</li> 
 
     <li>Kezia</li> 
 
     <li>Gelia</li> 
 
     </ul> 
 
    </li> 
 
    <li>CCD</li> 
 
    <li>Scanning</li> 
 
    <li>Claims</li> 
 
    </ul>

hier ich einige CSS-Code in Ihrem Stil hinzugefügt und fügte einige clss in Ihre HTML-Elemente

.dropdown { 
    position: relative; 
    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); 
     padding: 12px 16px; 
     z-index: 1; 
} 

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

Answer 4

Sie können es auf diese Weise tun:

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    position:absolute; 
 
    /*This will remove the bullet*/ 
 
} 
 

 
#container ul li { 
 
    background-color: #3C4794; 
 
    /*Adds a back-color.*/ 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    /*Show the text in the middle*/ 
 
    float: left; 
 
    color: white; 
 
    /*Font color*/ 
 
    font-size: 18px; 
 
} 
 

 
#container ul li:hover { 
 
    background-color: #388222; 
 
    /*Change the color when hovering the mouse.*/ 
 
} 
 
#sub { 
 
    display: none; 
 
} 
 
#container ul li:hover #sub { 
 
    display: block; 
 
}

<div id="container"> 
 
     <ul> 
 
      <li>Support 
 
       <ol id="sub"> 
 
        <li>Ria</li> 
 
        <li>Kezia</li> 
 
        <li>Gelia</li> 
 
       </ol> 
 
      </li> 
 
      <li>CCD</li> 
 
      <li>Scanning</li> 
 
      <li>Claims</li> 
 
     </ul>   
 
    </div>

JSFiddle

Old JSFiddle (with JS)

Answer 5

CSS-Stile auf die Schaltfläche Hinzufügen Dropdown und diesen Code zu versuchen.

<head> 
<style> 
*{ 
    margin:0px; 
    padding:0px; 
} 
#container ul{ 
    list-style:none; /*This will remove the bullet*/ 
} 

#container ul li{ 
    background-color:#3C4794; /*Adds a back-color.*/ 
    width:150px; 
    border:1px solid white; 
    height:50px; 
    line-height:50px; 
    text-align:center; /*Show the text in the middle*/ 
    float:left; 
    color:white; /*Font color*/ 
    font-size:18px; 
} 

#container ul li:hover { 
    background-color:#388222; /*Change the color when hovering the mouse.*/ 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    top:50px; 
} 

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

</style> 
</head> 
<body> 
    <div id="container"> 
     <ul> 

      <li> 
       <div class="dropdown"> 
        <ul> 
         <li>Support</li> 
        </ul> 

        <div class="dropdown-content"> 
          <ul> 
            <li>Ria</li> 
            <li>Kezia</li> 
            <li>Gelia</li> 
           </ul> 
        </div> 
        </div> 
      </li> 

      <li>CCD</li> 
      <li>Scanning</li> 
      <li>Claims</li> 
     </ul> 
</body>