Problem with drop-down menu in IE

ariel88ro · August 7th, 2008, 07:58 AM

Hello everyone!
I have a problem with a select component in IE(In Firefox works well).

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Select box</title>
<style>
body
{
  background:#000000;
}
#JumpTo {
  position:absolute; display:none; z-index:-1000; left:-1px; top:15px; width:70px; border:solid 1px #dbdbdb; background:#ffffff; padding:6px;
}

#JumpTo select
{
  width :  69px;
  font-family:arial, verdana, sans-serif;
  border:solid 1px #A6ADB4;
  padding-top:1px;
  color:#878788;
  height:18px;
  font-size:10px;
}

#JumpTo .middleSelect
{
  margin : 4px 0px 4px 0px;
}
#links {
    PADDING-RIGHT: 0px; z-index:2; PADDING-LEFT: 114px; PADDING-BOTTOM: 0px; PADDING-TOP: 47px; POSITION: relative
}

#links div.link
{
  position:relative; z-index:2; float:left; margin-right:7px; border:solid 1px #dbdbdb; background:#ffffff;
}

#links div.linkSelected
{
  position:relative; z-index:2; float:left; margin-right:7px; border-top:solid 1px #dbdbdb; border-left:solid 1px #dbdbdb; border-right:solid 1px #dbdbdb; background:#ffffff; border-bottom:solid 1px #ffffff;
}

#links span.heading {
    display:block; font-family: Tahoma; font-size:9px; color:#7e7e7e; text-decoration:none; padding:1px 6px 1px 6px; line-height:13px;
}
</style>
<script language="javascript">
    function showOptions(objLink, sOptionsId)
    {
        objLink.className = "linkSelected";
        document.getElementById(sOptionsId).style.display = "block";
    }
    
    function hideOptions(objLink, sOptionsId)
    {
        objLink.className = "link";
        document.getElementById(sOptionsId).style.display = "none";
    }
</script>
</head>

<body>
<div id="links">
<div class="link" id="lnk" onmouseover="showOptions(this, 'JumpTo');" onmouseout="hideOptions(this, 'JumpTo');">
        <span class="heading">JUMP TO</span>
    <div id="JumpTo"> 
      <select id="list1">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
      </select>
          <select id="list2" class="middleSelect">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          </select>
          <select id="list3">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          </select>
    </div>
  </div>
</div>
</body>
</html>

Try to paste this code and run this on IE and you'll see that the lower part disappears when rolling over the select components. I can't see why up to now

Any help will be apreciated!