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

时间:2013-05-27 10:37:10

标签: css

我有两个项目 - 一个在另一个内部。 问题是secon项目显示在第一个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/

1 个答案:

答案 0 :(得分:3)

使用height: 44px代替CSS中的min-height: 44px

请参阅demo here

在相关的说明中,不建议在px中给出高度,因为当用户增加Web浏览器的字体大小(或缩放)时,它不可伸缩。