Question

我正在设计一个新网站，并在我的导航菜单上挣扎。我的问题只出现在全屏宽度上，但我认为我的（移动优先设计代码）会导致一些错误。

我的问题是：

我想要一个下拉菜单。但是当我暂停<li> - 包含下一个<ul>级别的元素时，该列表会出现在<li>的右侧。

我应该怎样做才能让我的下一个<ul>向下<li>？

这是我的CSS和HTML：

/* RESPONSIVE-MENU */
.slide-toggle{
    display: inline;
    text-align: center;
}

ul.menu {
    width: 100%;
    background: #5EB22F;
    display: none;
    text-align: center;
    font-size: 20px;
}
.menu li  a{
    color: #FFF;
    text-decoration: none;
}
.menu li{
    padding-bottom: 20px;
    padding-top: 20px;
    border-bottom: 1px solid #f9f9f9;
}
.menu li:last-child{
    padding-bottom: 20px;
}
.menu li:first-child{
    padding-top: 20px;
}
.menu li:hover{
    background: #b7dfa0;
}
.menu ul ul{
    display: none;
}


/* FULL-SCREEN-MENU  */
.slide-toggle{
    display: none;
}
ul.menu{
    display: block;
    padding: 23px 0;
}
ul.menu li {
    display: inline;
    padding: 20px 20px;
    border: 0;
}
ul.menu ul {
    display: none;
    position: absolute;
    margin-top: 30px;
}
ul.menu li:hover > ul{
    display: inherit;
}
ul.menu ul li{
    min-width: 170px;
    float: none;
    display: list-item;
    left: 0;
    position: relative;
    background: #5EB22F;
}

    <div class="menu-start-container"><ul id="menu-start" class="menu"><li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="#">start</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-18"><a href="#">om oss</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-17"><a href="#">tjänster</a>
<ul class="sub-menu">
    <li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="#">jour</a></li>
    <li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-65 current_page_item menu-item-70"><a href="#">flytt</a></li>
    <li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a href="#">städning</a></li>
    <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="#">bud</a></li>
    <li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a href="#">priser</a></li>
</ul>
</li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="#">offert</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="#">kontakta oss</a></li>
</ul></div>

Answer 1

可能给子菜单一个绝对位置而“父菜单”位置相对，现在你可以使用margin-top将子菜单放在“父菜单”下面:(父菜单的高度）

编辑：你也可以发布HTML的特定部分吗？

编辑2：

要将它放在parent-li元素下，你必须添加position：relative;到了亲李。否则child-ul会忽略parent-li。

导航菜单不会出现我想要的

1 个答案: