Machen Sie ein Dropdown-Menü in Flexbox Navbar

Ich habe eine Navbar mit Flex-Eigenschaften gemacht. Jetzt möchte ich ein Dropdown-Menü zu einem Element in Navbar hinzufügen, aber es hat nicht wie erwartet funktioniert.Machen Sie ein Dropdown-Menü in Flexbox Navbar

@font-face { 
 
    font-family: Oxygen; 
 
    src: url('https://fonts.googleapis.com/css?family=Oxygen'); 
 
} 
 
body{ 
 
    margin: 0; 
 
} 
 
nav { 
 
    background-color: #f8f8f8; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
nav ul { 
 
    height: 50px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-start; 
 
    margin: 0; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    color: #777; 
 
    padding: 15px; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
} 
 
nav a:hover { 
 
    color: #000; 
 
} 
 
.logo a { 
 
    font-size: 25px; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
} 
 
ul.drop-menu li { 
 
    display: none; 
 
    list-style: none; 
 
} 
 
li:hover > ul.drop-menu li { 
 
    display: flex; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Navbar</title> 
 
    <link rel="stylesheet" href="nav.css"> 
 
</head> 
 
<body> 
 
    <nav> 
 
     <ul class="left"> 
 
      <li class="logo"><a href="#">SoulOTrip</a></li> 
 
      <li > 
 
       <a href="#">Adventure Trips</a> 
 
       <ul class="drop-menu"> 
 
        <li>1</li> 
 
        <li>2</li> 
 
        <li>3</li> 
 
        <li>4</li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Top Destinations</a></li> 
 
      <li><a href="#">Explore</a></li> 
 
     </ul> 
 
     <ul class="right"> 
 
      <li class=""><a href="#">Username</a></li> 
 
      <li class=""><a href="/login">Login</a></li> 
 
      <li class=""><a href="/register">Register</a></li> 
 
     </ul> 
 
</nav> 
 
</body> 
 
</html>

Ich möchte das Dropdown-Menü mit dem flexiblen Behälter, so dass ich 4 Spalten der gesamte Seitenbreite erzeugen kann, werde ich auch hier sehr viele Möglichkeiten auf anderen Registerkarten machen Dropdown.

Quelle

2017-04-09 Yash Lotan

Durch die Zugabe von position: relative zum nav und position: absolute zum dropdown, machen die dropdown Position/Größe in Bezug auf die nav

Einstellung flex: 1 auf die dropdown ‚s flex Elemente (li) wird sie horizontal

machen strecken

aktualisiert/hinzugefügt diese 3 Regeln

nav { 
    position: relative; 
    background-color: #f8f8f8; 
    display: flex; 
    justify-content: space-between; 
} 

li:hover > ul.drop-menu li { 
    display: flex; 
    flex: 1; 
} 
li > ul.drop-menu { 
    position: absolute; 
    display: flex; 
    left: 0; 
    top: 100%; 
    width: 100%; 
}

Stapel Snippet

@font-face { 
 
    font-family: Oxygen; 
 
    src: url('https://fonts.googleapis.com/css?family=Oxygen'); 
 
} 
 
body{ 
 
    margin: 0; 
 
} 
 
nav { 
 
    position: relative; 
 
    background-color: #f8f8f8; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
nav ul { 
 
    height: 50px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-start; 
 
    margin: 0; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    color: #777; 
 
    padding: 15px; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
} 
 
nav a:hover { 
 
    color: #000; 
 
} 
 
.logo a { 
 
    font-size: 25px; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
} 
 
ul.drop-menu li { 
 
    display: none; 
 
    list-style: none; 
 
} 
 
li:hover > ul.drop-menu li { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
li > ul.drop-menu { 
 
    position: absolute; 
 
    display: flex; 
 
    left: 0; 
 
    top: 100%; 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Navbar</title> 
 
    <link rel="stylesheet" href="nav.css"> 
 
</head> 
 
<body> 
 
    <nav> 
 
     <ul class="left"> 
 
      <li class="logo"><a href="#">SoulOTrip</a></li> 
 
      <li > 
 
       <a href="#">Adventure Trips</a> 
 
       <ul class="drop-menu"> 
 
        <li>1</li> 
 
        <li>2</li> 
 
        <li>3</li> 
 
        <li>4</li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Top Destinations</a></li> 
 
      <li><a href="#">Explore</a></li> 
 
     </ul> 
 
     <ul class="right"> 
 
      <li class=""><a href="#">Username</a></li> 
 
      <li class=""><a href="/login">Login</a></li> 
 
      <li class=""><a href="/register">Register</a></li> 
 
     </ul> 
 
</nav> 
 
</body> 
 
</html>

Quelle

2017-04-09 06:41:07 LGSon

Sie nicht Anzeige benötigen: flex für li Elemente in Dropdown

@font-face { 
 
    font-family: Oxygen; 
 
    src: url('https://fonts.googleapis.com/css?family=Oxygen'); 
 
} 
 
body{ 
 
    margin: 0; 
 
} 
 
nav { 
 
    background-color: #f8f8f8; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
nav ul { 
 
    height: 50px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-start; 
 
    margin: 0; 
 
} 
 
nav ul>li{ 
 
    position:relative; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    color: #777; 
 
    padding: 15px; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
} 
 
nav a:hover { 
 
    color: #000; 
 
} 
 
.logo a { 
 
    font-size: 25px; 
 
} 
 
nav ul { 
 
    list-style: none; 
 
} 
 
ul.left>li.drop-menu{ 
 
    display:none; 
 
    position:absolute; 
 
    left:0; 
 
    
 
} 
 
.drop-menu li{ 
 
    display:block; 
 
} 
 
ul.left>li:hover .drop-menu{ 
 
    display:block; 
 
}

Quelle

2017-04-09 11:30:20

ich etwas anderes für die bin der Planung li Elemente, also habe ich die Flex-Eigenschaft hinzugefügt y. –

Machen Sie ein Dropdown-Menü in Flexbox Navbar

Antwort

Verwandte Themen