logo标签列表

使用弹性盒子(navbar)制作下拉菜单

htmlcssflexbox
5

我使用了flex属性创建了一个导航栏。现在我希望在导航栏的某个元素上添加一个下拉菜单，但它并没有按照预期工作。

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

我希望能够使用弹出式菜单和flex容器，以此创建4列全页面宽度，并且我也会在其他选项卡上添加下拉式菜单。

4个回答
9
通过在 nav 上添加 position: relative，并在 dropdown 上添加 position: absolute，可以使 dropdown 相对于 nav 定位/调整大小。
在 dropdown 的 flex 项（li）上设置 flex: 1，可以使它们水平拉伸。
更新/添加这三条规则。
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>

0

在下拉菜单中，li元素不需要使用display:flex

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

我计划为li元素添加其他属性，因此我加入了flex属性。 - Yash Lotan
0

我为我的工作和jumperl.com网站开发了一个大型的responsive_flex.css文件。

在我尽可能简化的过程中，我发现了这篇文章，这里有个好方法。

/* Menu Dropdown! please use div */
.dropdown{
    display: flex;
    flex-wrap: wrap;
    flex-direction:column;
}
.dropdown > .dropdown-title{
    /* put the height and width here! */
}
.dropdown > .dropdown-sub{
    display: none;
    z-index: 1;
    flex-direction: column; /* or row */
}
.dropdown:hover > .dropdown-sub {
    display: flex;
}.dropdown:hover > .dropdown-sub  > .dropdown-option:hover{
    background-color: #abcdef;
}
<div class="dropdown" style="background-color:#aaa;">
    <div class="dropdown-title" style="background-color:#bbb; border:1px solid #000000;">Titulo</div>
    <div class="dropdown-sub" style="background-color: #cccccc;">
        <div class="dropdown-option">option 1</div>
        <div class="dropdown-option">option 2</div>
        <div class="dropdown-option">option 3</div>
    </div>
</div>

0

这解决了一个关于子菜单上可能位置的绝对问题。

抱歉我的英语不好，我的朋友。

/* Menu Dropdown! please use div */
.dropdown{
    display: flex;
    flex-wrap:wrap;
    flex-direction: row; /* or column */
    /* put the height and width here! */
}
.dropdown > .dropdown-title{
    width: 100%;
    height: 100%;
}
.dropdown > .dropdown-sub{
    display: none;
    z-index: 1;
    flex-direction: column; /* or row */
    /* width: 100%; */
}
.dropdown:hover > .dropdown-sub {
    display: flex;
}.dropdown:hover > .dropdown-sub  > .dropdown-option:hover{
    /* background-color: #abcdef; */
}
<div class=" dropdown" style="background-color:#aaa;height: 20px;">
    <div class="dropdown-title" style="background-color:#bbb; border:1px solid #000000;">Titulo</div>
    <div class="dropdown-sub" style="background-color: #cccccc;">
        <div class="dropdown-option">option 1</div>
        <div class="dropdown-option">option 2</div>
        <div class="dropdown-option">option 3</div>
    </div>
</div>
<div>Random bottom item</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接