Question

我正在尝试将子菜单放在它的选择选项this下方，但是当我在0上设置左右属性时

.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:0;
right:0;
}

它有整个网站的宽度。当我将它们设置为自动时，它看起来像this。

如何将我的子菜单放在这个div的正下方，或者看起来更酷，哪个更合适呢？

代码（评论中的整个JSFiddle）：
HTML：

<div id="sidebar">
    <div class="sidebar_option">Strona główna</div>
    <div class="sidebar_option">Galeria</div>
    <div class="sidebar_option">Reżyserzy
        <div class="sidebar_wrapper">
            <a href="tarantino.html"><div class="submenu" style="margin-top:10px">Quentin Tarantino</div></a>
            <a href="coen.html"><div class="submenu">Bracia Coen</div></a>
            <a href="anderson.html"><div class="submenu">Wes Anderson</div></a>
        </div>
    </div>
    <div class="sidebar_option">Ulubione filmy</div>
    <div class="sidebar_option">Seriale</div>
    <div class="sidebar_option">Kontakt</div>
</div>

CSS：

.submenu
{
text-align:center;
border-bottom:dotted 2px black;
padding-top:10px;
padding-bottom:10px;
display:none;
font-size:13px;
}
.sidebar_wrapper
{
position:absolute;
background-color:lightgray;
left:auto;
right:auto;
}
.sidebar_option:hover div
{
display:block;
}
.sidebar_option:hover
{
background-color:lightgray;
cursor:pointer;
}
.sidebar_option
{
text-align:center;
margin:10px;
padding:10px;
border-bottom:dotted 2px black;
}

Answer 1

我认为关键是你需要将sidebar_option的位置设置为relative，以便submenu_wrapper相对于侧边栏而不是窗口的位置。然后是子菜单的左右两个值。它可以是任何东西，但如果你想让它居中，它们必须是相同的。

{{1}}

这是更新的jfiddle：https://jsfiddle.net/8d3p50hy/13/

带div的垂直子菜单

1 个答案: