css - 第二个 ul li 元素(在另一个 ul 内)显示在第一个 ul 上

Question

我有两个元素 - 一个在另一个里面。问题是第二个元素显示在第一个 ul li 元素的顶部。

HTML:

<div id="left">
<div id="logo"></div>
<div id="menu">
    <ul class="menu">
        <li class="item-101"><a href="/">Home</a>
        </li>
        <li class="item-102 current active deeper parent"><a href="/index.php/merchants-shops">Merchants / Shops</a>
            <ul>
                <li class="item-104"><a href="/index.php/merchants-shops/hottest-discounts">Hottest Discounts</a>
                </li>
                <li class="item-105"><a href="/index.php/merchants-shops/training-and-advice">Training and advice</a>
                </li>
                <li class="item-106"><a href="/index.php/merchants-shops/call-our-manager">Call our manager</a>
                </li>
            </ul>
        </li>
        <li class="item-103"><a href="/index.php/contact-us">Contact us</a>
        </li>
    </ul>
</div>
</div>

CSS:

#left {
    float: left;
    width: 250px;
}

#left #menu ul {
    list-style:none;
    padding: 0;
}
#left #menu ul.menu li {
    background-image: url(http://tax.allfaces.lv/templates/tax/images/menu_bulta.png), url(http://tax.allfaces.lv/templates/tax/images/menu_fons.png);
    background-position: 210px 7px, left 0px;
    background-repeat: no-repeat;
    width: 250px;
    height: 44px;
    padding: 0 0 5px 0;
}
#left #menu ul.menu li a {
    text-transform: uppercase;
    text-decoration: none;
    font-style: italic;
    padding: 15px 0 0 17px;
    color: #336699;
    font-size: 17px;
}
#left #menu ul.menu li.current {
    background-image:none;
    background-color: #1F5CA9;
}

#left #menu ul.menu li.current a {
    font-weight: bold;
    color: white;
}

#left #menu ul.menu li.current ul li {
    background-image:none;
    background-color: #1F5CA9;
}

#left #menu ul.menu li.current ul li a {
    font-size: 11px;
    text-decoration: underline;
    color: #c6e3ff;
}

您可以在此处查看示例:http://jsfiddle.net/5he9Y/

Answer 1

不要在 CSS 中使用 height: 44px，而是使用 min-height: 44px。

参见 demo here .

在相关说明中，以像素为单位给出高度不是推荐的想法，因为当用户增加网络浏览器的字体大小(或缩放)时它不可缩放。