CODEWITHSUNDEEP
htmlcssinternet-explorer-7
Jason Kelly
Jason Kelly

Reputation: 2655

CSS only mock up of a select box

I need your help.

It appears that my container's width is not being forced when the page is first loaded. The only thing that I see on my screen is: enter image description here, the width of the container should be forced, therefore it should look like this:enter image description here

How can I fix this?

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

Upvotes: 0

Views: 175

Answers (1)

russellc
russellc

Reputation: 494

You forgot to add the float: left; CSS property to #two.

Here: http://jsfiddle.net/wuW82/

Upvotes: 1

Related Questions