Question

我有一个基本的嵌套menutruct：

#topmenu
{
    min-height: 54px;
    width: 980px;
    margin: 0 auto;
    background-color: green;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#topmenu ul
{
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 13px 0 0 0;
    color: #fff;
    font-size: 1.6em;
}

#topmenu ul li
{
    display: inline;
    padding: 15px 2.5% 17px 2.5%;
    margin: 0 0 0 0;
    border-right: 1px solid #000;
    box-shadow: 1px 0px 0px #6e6b6b;
    position: relative;
}

#topmenu ul li:last-child
{
    border: none;
    box-shadow: none;
}

#topmenu ul li:first-child
{
    border-top-left-radius: 15px;
}

#topmenu ul li img
{
    vertical-align: middle;
}

#topmenu a
{
    color: #fff;
    text-decoration: none;
    height: 54px;
}

#topmenu ul li ul{
    display: none;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 13px 0 0 0;
    color: #fff;
    font-size: 1.6em;
    position: absolute;
    z-index: 1000;
    background-color: red;
}

#topmenu ul li:hover ul{
    display: block;
}

#topmenu ul li ul li{
    display: block;
    padding: 15px 2.5% 17px 2.5%;
    margin: 0 0 0 0;
    border-right: 1px solid #000;
    box-shadow: 1px 0px 0px #6e6b6b;
    font-size: 14px;
}

#topmenu ul li ul li:last-child{
    border: none;
    box-shadow: none;
}

#topmenu ul li ul li:first-child{
    border-top-left-radius: 15px;
}

#topmenu ul li ul li img{
    vertical-align: middle;
}
<div id="topmenu">
    <ul>
        <li class=""><a href="home"><img src='/assets/upload/pagemenu/home.png' /></li>
        <li class=""><a href="tanar">Tanßr</a></li>
        <li class=""><a href="diak">Dißk</a></li>
        <li class=""><a href="szulo">SzŘl§</a></li>
        <li class=""><a href="nyelviskola">Nyelviskola</a></li>
        <li class="">
        <a href="boltok">Boltok</a>
        <ul>
            <li class=""><a href="">aaaaaaaa</a></li>
            <li class=""><a href="">aaaaaaaaa</a></li>
        </ul>
        </li>
        <li class=""><a href="kapcsolat">Kapcsolat</a></li>
        <li class=""><a href="linkek">Linkek</a></li>
        <li class="kiemelt"><a href="webshop">Webshop</a></li>
    </ul>
<div style="clear: both;"></div></div>

它几乎没问题，但是“Boltok”（包含aaaaaaa）中的子菜单在“Boltok”菜单下并没有出现，而是与左边对齐。我无法弄清楚错误......

Answer 1

我在子菜单中添加了一个顶部和左侧

#topmenu ul li ul{
    display: none;
    list-style-type: none;
    margin: 0 0 0 0;
    padding: 13px 0 0 0;
    color: #fff;
    font-size: 1.6em;
    position: absolute;
    z-index: 1000;
    background-color: red;

    top: 62px; /* added */
    left: 0; /* added */
    width: 100%; /* this will cause the submenu to take the 100% width of the containing li - optional? */
};

所以我们只针对你改变这个类的第一个ul li。还添加了一个浮点数：向左并将显示更改为阻止

#topmenu > ul > li
{
    display: block; float: left;
    padding: 15px 2.5% 17px 2.5%;
    margin: 0 0 0 0;
    border-right: 1px solid #000;
    box-shadow: 1px 0px 0px #6e6b6b;
    position: relative;
}

这是更新的小提琴：http://jsfiddle.net/vqnUP/2/

Answer 2

jsFiddle

我只是解决你提到的问题。

我刚刚添加了

width:100%;至#topmenu ul li ul和

text-align:center;至#topmenu ul li ul li。

希望有帮助...

CSS嵌套菜单未正确对齐

2 个答案: