[Space Cowboy]

argh!!!!!! im going nuts here!

I want a very simple CSS menu (would be great if the drop down effect worked on IE6, but at this point I just need to get anything working).

The problem is that everytime I get one to work it messes up all the other standard lists I have in my pages.

I just dont understand how to get these to seperate and for me to style the menu in CSS without messing up my other lists!!


Here is my code:

css part

Code:

#navHome{width: 124px; height: 22px;} 
#navAboutUs{width: 124px; height: 22px;} 
#nav1{width: 124px; height: 22px;} 
#nav2{width: 124px; height: 22px;} 
#navNews{width: 124px; height: 22px;} 
#navContact{width: 125px; height: 22px;} 
ul { 
   margin: 0px; 
   list-style: none; 
   color:#FFFFFF; 

} 
ul li { 
   position: relative; 
   float: left; 
   padding-top:3px; 
   margin-left:1px; 
   margin-right:1px; 
   background-image:url(../images/nav_bg.jpg); 
   color:#FFFFFF; 
   font-size:90%; 
} 
ul li li { 
   position: relative; 
   float: left; 
   width: 110px; 
} 
li ul { 
   position: absolute; 
   left: 0px; /* Set 1px less than menu width */ 
   top: 23px; 
   display: none; 
} 

/* Styles for Menu Items */ 
ul li a { 
   display: block; 
   text-decoration: none; 
   color: #FFFFFF; 
} 
/* commented backslash mac hiding hack \*/ 
* html ul li a {height:1%} 
/* end hack */ 

/* this sets all hovered lists */ 
li:hover a, li.over a, 
li:hover li a:hover, li.over li a:hover { 
   color: #152D5a; 
} 

/* set dropdown to default */ 
li:hover li a, li.over li a { 
   color: #FFFFFF; 
   background-color:#5C84B8; 
   border: outset; 
   border-width: 0; 
   border-color: #000000; 
} 
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */ 
li:hover ul, li.over ul { display: block; text-decoration:underline; } /* The magic */

html

Code:

<ul id="nav"> 
  <li id="navHome"> 
    <div align="center"><a href="../index.aspx">Home</a></div> 
  </li> 
  <li id="navAboutUs"> 
    <div align="center"><a href="../about_us.aspx">About Us</a></div> 
  </li> 
  <li id="nav1"> 
    <div align="center"><a href="../xx.aspx">Services</a> 
          <ul> 
            <li><a href="../xx/index.aspx">xx</a></li> 
            <li><a href="../xx/index.aspx">xx</a></li> 
            <li><a href="../xx/index.aspx">xx</a></li> 
            <li><a href="../xx/index.aspx">xx</a></li> 
            <li><a href="../xx/index.aspx">xx</a></li> 
   <li><a href="../xx/index.aspx">xx</a></li> 
   <li><a href="../xx/index.aspx">xx</a></li> 
   <li><a href="../xx/index.aspx">xx</a></li> 
          </ul> 
    </div> 
  </li> 
  <li id="nav2"> 
    <div align="center"><a href="../history.aspx">History</a></div> 
  </li> 
  <li id="navNews"> 
    <div align="center"><a href="../news.aspx">News</a></div> 
  </li> 
  <li id="navContact"> 
    <div align="center"><a href="../contact.aspx">Contact</a></div> 
  </li> 
</ul>

I know its probably simple, but how do I alter this code so that it seperates it from the other lists I have on my web pages?

please help!
cheers!

[jfulton]

if you only want the styles to affect certain list elements within a certain div, you need to use the id selector in addition to the 'ul' or 'li' selector in your css.

So if you only wanted a style to affect nav1, you would use

Code:

#nav1 ul li { ... }

of if you wanted to affect ALL ul in nav, you would use

Code:

#nav ul { ... }

[Alan+61415484049]

Cool roll-over lists; pure css, validated HTML...which means MIE gets it wrong sometimes:

http://meyerweb.com/eric/css/edge/popups/demo.html