CSS，格式爲HTML格式

我一直在嘗試在下拉菜單中創建一個包含複選框的HTML表單。我已經能夠做到這一點。但是當你點擊一個特定的下拉菜單時，剩下的下拉菜單會下移。在第二次點擊時，下拉菜單崩潰並返回原來的位置。請幫我解決這個問題。我試圖保持下拉菜單的位置不變，如果複選框不顯示。CSS，格式爲HTML格式

我想要實現的是類似於左側的過濾器http://www.luxuryretreats.com/。會感謝您的任何建議！

這是代碼。

<html> 
<head> 
    <script type="text/javascript"> 
    function ExposeList1() { 
     var showstatus = document.getElementById('ScrollCountry').style.display; 
     if (showstatus == 'none') { 
      document.getElementById('ScrollCountry').style.display = "block"; 
     } else { 
      document.getElementById('ScrollCountry').style.display = 'none'; 
     } 
    } 
    function ExposeList2() { 
     var showstatus = document.getElementById('Scrollguests').style.display; 
     if (showstatus == 'none') { 
      document.getElementById('Scrollguests').style.display = "block"; 
     } else { 
      document.getElementById('Scrollguests').style.display = 'none'; 
     } 
    } 
    function ExposeList3() { 
     var showstatus = document.getElementById('Scrollminprice').style.display; 
     if (showstatus == 'none') { 
      document.getElementById('Scrollminprice').style.display = "block"; 
     } else { 
      document.getElementById('Scrollminprice').style.display = 'none'; 
     } 
    } 
    function ExposeList4() { 
     var showstatus = document.getElementById('Scrollmaxprice').style.display; 
     if (showstatus == 'none') { 
      document.getElementById('Scrollmaxprice').style.display = "block"; 
     } else { 
      document.getElementById('Scrollmaxprice').style.display = 'none'; 
     } 
    } 
</script> 
</head> 
<body> 
    <form action="trying.php" method="post"> 
     <img src="original1.png" onmouseover="this.src='onhover1.png'" 
      onmouseout="this.src='original1.png'" onclick="ExposeList1()"> 
     <div> 
      <div id="ScrollCountry" 
       style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none"> 
       <input type="checkbox" id="scb1" name="c1" value="Mexico">Mexico<br> 
       <input type="checkbox" id="scb2" name="c2" value="Belize">Belize<br> 
       <input type="checkbox" id="scb3" name="c3" value="Jamaica">Jamaica<br> 
       <input type="checkbox" id="scb4" name="c4" value="Thailand">Thailand<br> 
       <input type="checkbox" id="scb5" name="c5" 
        value="Turks &amp; Caicos">Turks &amp; Caicos<br> 
       <br /> 
      </div> 
     </div> 



     <img src="original2.png" onmouseover="this.src='onhover2.png'" 
      onmouseout="this.src='original2.png'" onclick="ExposeList2()"> 
     <div> 
      <div id="Scrollguests" 
       style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none"> 
       <input type="checkbox" id="n1" name="n1" value="4">2 - 4<br> 
       <input type="checkbox" id="n2" name="n2" value="6">4 - 6<br> 
       <input type="checkbox" id="n3" name="n3" value="8">6 - 8<br> 
       <input type="checkbox" id="n4" name="n4" value="10">8 - 
       10<br> <input type="checkbox" id="n5" name="n5" value="30">10+<br> 
       <br /> 
      </div> 
     </div> 



     <img src="original3.png" onmouseover="this.src='onhover3.png'" 
      onmouseout="this.src='original3.png'" onclick="ExposeList3()"> 
     <div> 
      <div id="Scrollminprice" 
       style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none"> 
       <input type="checkbox" id="mn1" name="mn1" value="200">200<br> 
       <input type="checkbox" id="mn2" name="mn2" value="300">300<br> 
       <input type="checkbox" id="mn3" name="mn3" value="400">400<br> 
       <input type="checkbox" id="mn4" name="mn4" value="500">500<br> 
       <input type="checkbox" id="mn5" name="mn5" value="600">600<br> 
       <br /> 
      </div> 
     </div> 
     <img src="original4.png" onmouseover="this.src='onhover4.png'" 
      onmouseout="this.src='original4.png'" onclick="ExposeList4()"> 
     <div> 
      <div id="Scrollmaxprice" 
       style="height: 150; width: 200px; overflow: auto; border: 1px solid blue; display: none"> 
       <input type="checkbox" id="mx1" name="mx1" value="600">600<br> 
       <input type="checkbox" id="mx2" name="mx2" value="700">700<br> 
       <input type="checkbox" id="mx3" name="mx3" value="800">800<br> 
       <input type="checkbox" id="mx4" name="mx4" value="900">900<br> 
       <input type="checkbox" id="mx5" name="mx5" value="1000">1000<br> 
      </div> 
     </div> 
     <input type="submit" /> 
    </form> 
</body> 
</html>

來源

2012-08-26 Works On Mine