Help with CSS Menu

[crimsonsmeagol]

How can I code the CSS menu so that the code only affects the 'ul' and 'il' tags inside of a certain div tag? I am wanting to use lists in other parts of my pages without it actually having the drop down styles applied to it. I've tried to put #navBar (the name of my div tag) before the 'il' and 'ul' in the CSS code but that keeps my drop down menu from working in IE6 (I have already included the appropriate JavaScript to make it work in IE6 and it works before adding the #navBar). However, it still works in Firefox. Please help.

[Medyman]

Have you looked at the DD CSS Menus?
They would be a good base to go off of....

http://www.dynamicdrive.com/style

[crimsonsmeagol]

I tried looking at them, but none of them seem to be what I want, and I didn't see anything that would fix my problem.
This is the CSS code, which is being read from an external document

/* CSS Document */
 #navBar ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }
  #navBar li {
	float: left;
	position: relative;
	width: 8em;
	background-color: #FFFFCC;
	border: 1px solid #333300;
  }
 #navBar li ul {
	display: none;
	position: absolute;
	top: 1em;
	left: 0;
  }
  
  #navBar li > ul {
	top: auto;
	left: auto;
	}
  #navBar li:hover ul, li.over ul{ display: block; }

And the HTML code is

div id="navBar">
    <div align="center">
      <ul id="nav">
        <li id="navli"><a href="../index2.html">Home</a> </li>
        <li>Board
          <ul>
            <li><a href="../mwaboard.html">Board & News</a></li>
            <li><a href="../mwabylaws.html">State By-Laws</a></li>
            <li><a href="../mwaelections.html">Board Election</a></li>
          </ul>
        </li>
        <li>Membership
          <ul>
            <li><a href="../mwamembership.html">Membership Page</a></li>
            <li><a href="../mwalifetime.html">Lifetime Membership</a></li>
            <li><a href="../mwaonlinemembership.html">Online Membership</a></li>
            <li><a href="../mwamembershipform.html">Membership Form</a></li>
            <li><a href="../mwachangeinfo.html">Change Member Info</a></li>
          </ul>
        </li>
        <li>Chapters
          <ul>
            <li><a href="../mwamississippiflyway.html">Mississippi Flyaway <br />&lt;St. Louis&gt;</a></li>
            <li><a href="../mwawestside.html">Westside <br />&lt;Kansas City&gt;</a></li>
            <li><a href="../mwacentral.html">Central <br /> &lt;Columbia&gt;</a></li>
            <li><a href="../mwanorthwest.html">Northwest <br />&lt;St. Joseph&gt;</a></li>
            <li><a href="../mwasouthwest.html">Southwest <br />&lt;Springfield&gt;</a></li>
            <li><a href="../mwaevents.html">Chapter Events Galleries</a></li>
          </ul>
        </li>
        <li>Communication
          <ul>
            <li><a href="../mwacontact.html">Contact List</a></li>
            <li><a href="../mwamessageboard.html">Message Board</a></li>
          </ul>
        </li>
        <li>Links
          <ul>
            <li><a href="../mwalinks.html">Useful Links</a></li>
            <li><a href="../mwasponsors.html">Sponsors &amp; Donors</a></li>
            <li><a href="../mwaseasons.html#map">Waterfowl Seasons</a></li>
            <li><a href="../mwasunrise.html">Sunrise Tables(USNO)</a></li>
          </ul>
        </li>
      </ul>
    </div>

And the JavaScript hack is

<script type="text/javascript"><!--//--><![CDATA[//><!--
  startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
//--><!]]></script>

Like I said it works perfectly in Firefox but not in IE6. It worked in IE6 until I added the #navBar to the CSS file. Thanks for the help.

[Medyman]

just stabbing at ideas here...it's hard to fully debug with only snippets of CSS and markup

but try adding #navbar to the div with align="center" instead of the outer div.

[crimsonsmeagol]

I'm not exactly sure what you mean, do you want me to move the align="center" so that it's

 <div id="navBar" align="center>

Because that throws off the entire layout. You can view the website here http://www.mowaterfowl.org/index2.html
The CSS files are external, but what I included above is everything in the cssmenu file which is all I have that does anything with the drop down menu. Thank you for your help.