在flexbox導航欄中創建下拉菜單

我製作了一個具有flex屬性的導航欄。現在我想嚮導航欄中的某個元素添加一個下拉菜單，但它不能按預期工作。在flexbox導航欄中創建下拉菜單

@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>

我想與柔性容器的下拉菜單中，這樣我可以創建完整的頁面寬度的4列，我也會讓下拉其他選項卡上的菜單了。

來源

2017-04-09 Yash Lotan

通過添加position: relative到nav和position: absolute到dropdown，將使相對於nav

設置在dropdown的柔性物品flex: 1（li）的dropdown位置/大小將使其水平拉伸

更新/增加這3條規則

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%; 
}

棧片斷

@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>

來源

2017-04-09 06:41:07 LGSon

你不需要顯示：在下拉彎曲鋰元素

@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; 
 
}

來源

2017-04-09 11:30:20

我打算別的東西了李元素，所以我加了flex屬性年。 –

在flexbox導航欄中創建下拉菜單

回答

相關問題