Positionieren von zwei ungeordneten Listen untereinander als Vorbereitung für die Dropdown-Navigation

Ich habe mich wirklich lange angestrengt, die Listen richtig zu positionieren. Meine aktuellen Code ist:Positionieren von zwei ungeordneten Listen untereinander als Vorbereitung für die Dropdown-Navigation

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 

<body> 
<div id="wrapper"> 
    <nav id="nav"> 
     <ul> 
      <li><a href="">Option1</a></li> 
       <ul> 
        <li><a href="">Sub1</a></li> 
        <li><a href="">Sub2</a></li> 
       </ul> 
      <li><a href="">Option2</a></li> 
       <ul> 
        <li><a href="">Sub3</a></li> 
        <li><a href="">Sub4</a></li> 
        <li><a href="">Sub5</a></li> 
       </ul> 
      <li><a href="">Option3</a></li> 
     </ul> 
    </nav> 
</div> 
</body> 

</html>

und Stil:

* { 
    margin: 0; 
    padding: 0; 

} 

#nav { 
    display: inline-block; 


} 

#nav ul { 
    list-style: none; 
    line-height: 30px; 


} 

#nav li { 
    width: 200px; 
    border: 1px solid black; 
    float: left; 
    position: relative; 
} 

    #nav ul li a { 
     display: block; 
     height: 30px; 
    } 

    #nav ul ul { 
     position: absolute; 
    }

Aber jetzt sind die Elemente der Unterliste "Senke" in der Hauptliste. Ich werde das nicht los. Irgendwelche Vorschläge, was im Code geändert werden soll?

Quelle

2016-06-02 ILoveChess

Die Einrückung des HTML ist irreführend. –

Es ist nicht ganz klar, die endgültige Stil erreichen Sie hoffen, aber wenn die relative oder absolute Positionierung verwenden, müssen Sie die Margen zumindest zu definieren. Ihre relative Positionierung ist im Wesentlichen normal, da kein Rand definiert ist. Ebenso verursacht Ihre absolute Positionierung Elemente, die sich überlappen, da Sie keinen Rand oder Abstand haben.

Ich habe die CSS Kommentar gesetzt, die Probleme verursacht wurde und hoffentlich ist es das, was Sie suchen?

* { 
    margin: 0; 
    padding: 0; 
} 

#nav { 
    display: block; 
} 

#nav ul { 
    list-style: none; 
    line-height: 30px; 
} 

#nav li { 
    width: 200px; 
    border: 1px solid black; 
    /* float: left; */ 
    /* position: relative; */ 
} 

#nav ul li a { 
    display: block; 
    height: 30px; 
} 

#nav ul ul { 
    /* position: absolute; */ 
}

Quelle

2016-06-02 17:12:21 tcguy

Das half ein bisschen, aber das wollte ich nicht erreichen. Ich möchte Option1 Option2 und Option3 in derselben Zeile nebeneinander stehen, während die Unteroptionen darunter liegen. – ILoveChess

Positionieren von zwei ungeordneten Listen untereinander als Vorbereitung für die Dropdown-Navigation

Antwort

Verwandte Themen