0

CSS：

#divMainMenu ul {
    list-style-type: none;
    padding: 5px 0;
    height:400px;
}
#divMainMenu li {
    height: 17px;
    margin: 3px 0;
    padding: 14px 2px;
    border: 1px solid #eee7cb;
    background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{
    display: none;
}

html和脚本：

<script type="text/javascript">
function Show(pObj)
{
pObj = document.getElementById(pObj).id;
if (document.getElementById(pObj).style.display=='none')
    document.getElementById(pObj).style.display='block';
else
    document.getElementById(pObj).style.display='none';
}
</script>
<div id="divSidePanel">
    <div id="divMainMenu">
        <ul>
            <li onclick="Show('Buyers')">Buyers
                <ul id="Buyers" style="display:none;">
                    <li>Search</li>
                    <li>Submit request</li>
                    <li>Send message to owner</li>
                </ul>
            </li>
            <li>Sellers</li>
            <li>Contact Us</li>
        </ul>
    </div>
</div>

问题：当我点击文本Buyers时，它会显示子/嵌套列表。但是，其他项目不会为嵌套列表腾出空间。因此嵌套列表覆盖了主列表的空间。

这是我的代码的问题还是它的标准工作方式？有没有办法让其他项目“下推”为嵌套项目让路？

谢谢！

4

2 回答 2

2

您需要在 CSS中使用min-height:而不是:。height如果你了解 jQuery，.hide() 和 .show() 函数会更好地工作。

于 2012-05-11T14:20:00.490 回答
1

把这个从你的 CSS 中拿出来：

#divMainMenu li ul{
    display: none;
}

并将height属性更改为min-height您的#divMainMenu li选择器

结果css：

#divMainMenu ul {
    list-style-type: none;
    padding: 5px 0;
    height:400px;
}
#divMainMenu li {
    min-height: 17px;
    margin: 3px 0;
    padding: 14px 2px;
    border: 1px solid #eee7cb;
    background: url(../../Images/50pTransparent-20x20.png) repeat;
}
#divMainMenu li ul{

}​

例子

于 2012-05-11T14:24:19.903 回答