So i created this website: http://www.ritztheatre.net/ but im having troubles with the menu in IE-7 and 6.

In IE-8, Firefox, and Chrome it looks normal heres a screenshot of it in IE-8:


In IE-7 the submenu rollover shifts to the side..



In IE-6 the submenu covers the top nav when rolled over..








Heres my HTML code im using for the navigation:

<ul id="nav">
<li><a href="#" title="Get Tickets">Get Tickets</a>
         <ul class="sub">
         <li><a href="comingsoon.html" title="Vip Seating">VIP Seating</a></li>
         <li><a href="comingsoon.html" title="Calender of Events">Calender of Events</a></li>
         <li><a href="boxoffice.html" title="Box Office Info.">Box Office Info.</a></li>
         <li><a href="omingsoon.html" title="Group Sales">Group Sales</a></li>
      </ul>
    </li>
       <li><a href="#" title="About the Ritz">About the Ritz</a>
     <ul class="sub">
         <li><a href="comingsoon.html" title="History">History</a></li>
         <li><a href="directions.html" title="Directions">Directions</a></li>
         <li><a href="comingsoon.html" title="Parking Facilities">Parking Facilities</a></li>
         <li><a href="comingsoon.html" title="Area Hotels">Area Hotels</a></li>
         <li><a href="/comingsoon.html" title="Bars & Restaurants">Bars & Restaurants</a></li>
      </ul>
  </li>
       <li><a href="#" title="Seating">Seating</a>
      <ul class="sub" >
         <li><a href="comingsoon.html" title="Front Orchestra">Front Orchestra</a></li>
         <li><a href="comingsoon.html" title="Orchestra">Orchestra</a></li>
         <li><a href="comingsoon.html" title="VIP Mezzanine">VIP Mezzanine</a></li>
         <li><a href="comingsoon.html" title="Balcony">Balcony</a></li>
      </ul>
    </li>
       <li><a href="#" title="Interior Photos">Interior Photos</a>
         <ul class="sub">
         <li><a href="comingsoon.html" title="Lobby">Lobby</a></li>
         <li><a href="comingsoon.html" title="Concession">Concession</a></li>
         <li><a href="comingsoon.html" title="Main Bar">Main Bar</a></li>
         <li><a href="comingsoon.html" title="Main Auditorium">Main Auditorium</a></li>
         <li><a href="comingsoon.html" title="Front Orchestra">Front Orchestra</a></li>
         <li><a href="comingsoon.html" title="Orchestra">Orchestra</a></li>
         <li><a href="comingsoon.html" title="VIP Mezzanine">VIP Mezzanine</a></li>
         <li><a href="comingsoon.html" title="Balcony">Balcony</a></li>
         <li><a href="comingsoon.html" title="Dressing Rooms">Dressing Rooms</a></li>
         <li><a href="comingsoon.html" title="Office">Office</a></li>
      </ul>
    </li>
    <li><a href="#" title="Venue Rental">Venue Rental</a>
     <ul class="sub" >
         <li><a href="comingsoon.html" title="Rental Info">Rental Info.</a></li>
         <li><a href="comingsoon.html" title="Private Events">Private Events</a></li>
      </ul>
    </li>
    <li><a href="concerts.html" title="Concerts">Concerts</a></li>
    <li><a href="videos.html" title="Videos">Videos</a></li></ul>
     </ul>

And here's the CSS:

body {
    behavior: url(csshover.htc);
    font-size:11px;
    font-family:Arial, Helvetica, sans-serif;
}
 
p a {
    color: #FFF;
    text-decoration:underline!important;

}
a{
    color:#FFF;
    text-decoration:none;
    }
p a:hover{    text-decoration: none!important;
}

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


ul#nav li a {
    display: block;
    font-weight: bold;
    padding: 2px 10px;
    background:#0662a8;
}

ul#nav li a:hover{
    background:#c80000;
    color:#fff;
    }
    
ul#nav li {
    float: left;
    position: relative;
    width: 110px;
    text-align: center;
    margin-right:5px;
    border:1px solid #ccc;
    list-style: none;

}

ul#nav li.current a{
    background:#ddd;
    }

ul#nav li.current a:hover{
    background:#888;
    color: #FFF;
    }

li ul {
    display: none;
    position: absolute;
    width:100px;
    top: 0;
    left: 0;
    font-weight: normal;
    padding: 1px 0 10px 0;
    margin-left:-1px;
}

ul#nav li ul.sub li{
    border-width:0 1px 1px 1px!important;
}

ul#nav li ul.sub li a{
    font-weight: normal!important;    
}
li>ul {
    top: auto;
    left: auto;
}

li:hover ul, li.over ul {
    display: block;
}

thank you for taking a look

What you're dealing with in IE6 and 7 it's their rotten bug pertaining to positioning and the 'stacking order'. You're going to need conditional comments and separate 'fixes only' css to address the issue.

http://www.timkadlec.com/post.asp?q=43

Use javascript to detect the browser and make a small aditional css for ie 6/7

Its a work around but thats all because they dont follow the rules

Browser-sniffing scripts are utterly unnecessary since the IE bugs can be 'cured' w/o the need for ANY javascript.