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