2013-11-21 56 views
0

我需要你的幫助。CSS只是模擬一個選擇框

看起來,我的容器的寬度沒有被迫在頁面第一次加載。我在我的屏幕上看到的唯一的事情就是: enter image description here,容器的寬度應強制,因此它應該是這樣的:enter image description here

我怎樣才能解決這個問題?

<!DOCTYPE html> 

<html> 

<head> 

<style type="text/css"> 
#container { 
    width: 200px; 
    float: left; 
    border: 1px solid green; 
} 
#one { 
    height: 200px; 
    border: 1px solid red; 
    display: none 
} 
#two { 
    width: 8px; 
    height: 8px; 
    border: 1px solid blue; 
} 
#menu { 
    padding: 3px; 
    margin: 0; 
    cursor: default; 
    width: 200px; 
} 
</style> 

<script type="text/javascript"> 
function showMenu(){ 
    document.getElementById("one").style.display="block"; 
} 
function hideMenu(){ 
    document.getElementById("one").style.display="none"; 
} 
</script> 

</head> 

<body> 

<div id="container"> 
    <div id="one" onclick="hideMenu()"> 
     <ul id="menu"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
    </div> 
</div> 

<div id="two"><img src="images/arrow_double.png" onclick="showMenu()"></div> 
</body> 

</html> 

回答