Question

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

The html and script:

<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>

The problem:
When I click on the text Buyers, it shows the sub/nested list. However, the other items do not make space for the nested list. Thus the nested list writes over the space of the main list.

Is this a problem with my code or is it the standard way it’s meant to work? And is there a way to let the other items ‘push down’ making way for the nested items?

Thanks!

Answer 1

Take this out of your css:

#divMainMenu li ul{
    display: none;
}

And change the height property to min-height on your #divMainMenu li selector

Resultant 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{

}​

Example