html - CSS 嵌套菜单未正确对齐

Question

我有一个基本的嵌套菜单结构:

http://jsfiddle.net/vqnUP/

#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's 你像这样改变这个类。还添加了一个 float: left 并将显示更改为 block

#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;
}

这是更新后的 fiddle :http://jsfiddle.net/vqnUP/2/