Простой Javascript проблема - список не расширяется корректно

Question

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

Проблема: Когда я щелкаю по тексту Покупатели, он показывает суб/вложенный список. Однако другие элементы не занимают места для вложенного списка. Таким образом, вложенный список записывается в пространство основного списка.

Это проблема с моим кодом или это стандартный способ работы? И есть ли способ, позволяющий другим предметам «нажимать», уступая место вложенным элементам?

Спасибо!

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

}​ 

Example

Answer 2

Вам необходимо использовать min-height: вместо height: в CSS. Если вы знаете jQuery, функции .hide() и .show() будут работать MUCH лучше.