我有两个项目 - 一个在另一个内部。 问题是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/
答案 0 :(得分:3)
使用height: 44px
代替CSS中的min-height: 44px
。
请参阅demo here。
在相关的说明中,不建议在px中给出高度,因为当用户增加Web浏览器的字体大小(或缩放)时,它不可伸缩。