在flexbox导航栏中创建一个下拉菜单

时间：2017-04-09 06:08:58

标签： html css css3 flexbox

我制作了一个带有弹性属性的导航栏。现在我想在导航栏中为元素添加一个下拉菜单，但它没有按预期工作。

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

我想要带有flex容器的下拉菜单，这样我就可以创建4列整页宽度，我也会在其他标签上创建下拉菜单。

4 个答案:

答案 0 :(得分：3)

将position: relative添加到nav，将position: absolute添加到dropdown，将dropdown相对于nav的位置/尺寸

在flex: 1的弹性项目dropdown上设置li会使它们水平拉伸

更新/添加了这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%;
}

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

答案 1 :(得分：0)

下拉列表中的li元素不需要 display：flex

＆＃13;
＆＃13; 
@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;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：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>

答案 3 :(得分：0)

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

Perdón我可怜的英语amico mio 

/* 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>

相关问题
最新问题