新手上路，请多包涵

我制作了一个具有 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 列全页宽度，我也会在其他选项卡上制作下拉菜单。

原文由 Yash Lotan 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css flexbox

阅读 791

2 个回答

得票最新

社区维基

发布于
2022-12-20

✓ 已被采纳

By adding position: relative to the nav and position: absolute to the dropdown , will make the dropdown position/size relative到 nav

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

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

原文由 Asons 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-20

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

Perdó 我可怜的英语 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>

原文由 user9866732 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

在 flexbox 导航栏中制作下拉菜单

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译