[css-d] Menu items expanding with browser window

[Ellen Heitman]

Please take a look at the following test page:

http://www.pottersignal.com/sales_test.aspx

Notice that if you expand or contract the page the horizontal menu at the
top of the page expands and contracts with it. How can I fix this?

Also, please ignore the tabulated structure of the website overall. This is
an inherited project and I am working on transitioning to a semantic layout,
but that will take quite some time. Is there anyway to fix this issue now?

Thanks!

Here is the HTML for the menu:

<ul id="menu">
        <li><a href="whatsnew.aspx">What&#8217;s New</a></li>
        <li><a href="#">Datasheets & Product Info</a>
            <ul class=".ie-shadow">
                <li><a href="datasheets_firesprinkler.aspx">Fire Sprinkler
Monitoring</a></li>
                <li><a href="datasheets_firesystems.aspx">Fire
Systems</a></li>
                <li><a href="datasheets_security.aspx">Security</a></li>
                <li><a href="datasheets_corrosion.aspx">Corrosion
Solutions</a></li>
                <li><a href="datasheets_industrial.aspx">Industrial
Controls</a></li>
                <li><a href="datasheets_international.aspx"
style="border-bottom:none;">International Products</a></li>
            </ul>
        </li>
        <li><a href="#">Resources</a>
            <ul class=".ie-shadow">
                <li><a href="training.aspx">Training</a></li>
                <li><a href="tools.aspx">Tools</a></li>
                <li><a href="manuals.aspx">Manuals</a></li>
                <li><a href="audio.aspx">Audio Device Samples</a></li>
                <li><a href="listings.aspx">Listings & Approvals</a></li>
                <li><a href="tradeshows.aspx">Tradeshows</a></li>
                <li><a href="links.aspx"
style="border-bottom:none;">Industry Links</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul class=".ie-shadow">
                <li><a href="sales.aspx">Sales</a></li>
                <li><a href="inquiries.aspx">General Inquiries</a></li>
                <li><a href="employment.aspx"
style="border-bottom:none;">Employment</a></li>
            </ul>
        </li>
</ul>

Here is the CSS:

/*DROPDOWN MENU*/

#container {
  position: relative;
}

#menu {
  position: absolute;
  top: 55px;
  right: 150px;
}

#menu, #menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#menu ul {
    box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
    -webkit-box-shadow: 3px 3px 8px #818181;
    -moz-box-shadow: 3px 3px 8px #818181;
}


#menu li {
  float: left;
  background: #FFF;
  margin: 0 15px;
}

#menu li a {
    color:#AE0101;
    font-size:12px;
}

#menu a {
  display: block;
}

#menu li ul {
  position: absolute;
  left: -999em;
}

#menu li ul li {
   clear:left;
   width:170px;
   margin:0;
}

#menu li:hover ul, #menu li ul:hover {
  left:auto;
}

#menu li ul li a {
    color:#666666;
    text-decoration:none;
    background:#EFEFEF;
    border-bottom:dotted #666666 1px;
    padding:4px;
    font-size:11px;
}

#menu li ul li a:hover, #menu li ul li.selected>a{
color:#AE0101;
background:#FFFFFF ;
}
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/