drop down css navigation styles messing with other lists

[SBee]

Hi -

I am using Css to make my drop down menus - everything looks great, but now every other ordered list through out my documents is taking on these attributes!
I have made a special style for these other lists, but they don't seem to be applying. Here is an example of the style:

#new ul {
color:#666666;
display:block;

}

#new ul li {
color:#666666;

}

and the html:

<div id="new">
<ul class="new">
<li class="new">This is a bulleted list</li>
<li class="new">This is a bulleted list</li>
<li class="new">This is a bulleted list</li>
</ul>
</div>

I just want a normal list to work - but it seems to be inheriting styles from the navigation list styles

[jelle76]

Id: #
Class: .

Ontop of my head, this should be right:

div#new ul
{
color:#666666;
display:block;
}
div#new ul li {
color: #666666;
}
<div id="new">
<ul>
<li>This is a bulleted list</li>
<li>This is a bulleted list</li>
<li>This is a bulleted list</li>
</ul>
</div>

[SBee]

I would think that is right too! But something from my drop down list navigation is over riding it. Here is the complete css:

/* September 2007 */
/*------------------------------------------*/

/* GLOBAL */
/* -------------------------------------- */

div#new ul
{
color:#666666;
display:block;
}
div#new ul li {
color: #666666;
}

/*------------------------------------------*/

/* NAVIGATION STYLES */
/* -------------------------------------- */

body {
font-family: arial, helvetica, serif;
font-size: 11px;
color: #666;
margin-top: 20px;
}

#content {
width: 800px;
background-color: #fff;

margin: auto;
voice-family: "\"}\"";
voice-family:inherit;
}
html>body #content {
width: 800px;;
}

a {
text-decoration: none;
}

a:link {
color: #666;
}

a:visited {
color: #666;
}

a:hover {
color: #green;
text-decoration: none;
}

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

#nav a {
font-weight: normal;
color: #666;
}

#nav a {
text-decoration: none;
}

#nav li li a {
display: block;
font-weight: normal;
color: #666;
}

#nav li li a:hover {
color: #22a009;
border: 0px solid #7d6340;
border-width: 0 0px;
}

li {
float: left;
position: relative;
text-align: left;
cursor: default;
background-color: white;

}

li#first {
border-left-width: 0em;
}

li#last {
border-right-width: 0em;
}

li ul {
background-color: #ffffff;
display: none;
position: absolute;
top: 100%;
left: 0;
line-height:15px;
font-weight: normal;
font-size:11px;
padding: 3px;
border: solid 1px #cccccc;
}

li>ul {
top: auto;
left: auto;
}

li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

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

hr {
display: none;
}

[edited by: SBee at 4:21 pm (utc) on Mar. 17, 2008]

[d40sithui]

looks like you're using the suckerfish drop down.
as jelle76 would have it, you're misusing the class and id selectors.
your last few lines of CSS has no class or id associated which is why the rest of your lists will inherit these attributes. You may need to add some class or ids to your menu lists to make them distinct from the rest of your non-menu lists.

//this hides the list items until you hover over it. you will need to add a class or id selector.
li ul {
background-color: #ffffff;
display: none;
position: absolute;
top: 100%;
left: 0;
line-height:15px;
font-weight: normal;
font-size:11px;
padding: 3px;
border: solid 1px #cccccc;
}

//needs id/class selector
li>ul {
top: auto;
left: auto;
}

//again, not sure what this does. but it looks like part of the menu too so needs to have id/class selector.
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}

//on hover, the list will show itself again. this is also part of the menu system and needs to have an id or class selector associated
li:hover ul, li.over ul {
display: block;
}