Different list stylings for separate DIVs - help

[noclu]

Hi everyone, I know it sounds fairly simple, but this problem has become a major inconvenience for me. How do I apply a certain style to my lists for only a particular DIV? For my navigation bar, my lists look like this:

#menu li, ul {list-style-type: none; text-align: center;}

but, if I add the following statement in the stylesheet, the menu list items are rendered the same as the in the main DIV:

#main li, ul {list-style-type: square; text-align: left; list-style-position: inside; }

(note* menu is not in main)

I would like each DIV to have uniquely styled lists, and for whatever reason the second statement overrides the first. Some confusion may arise in the actual CSS file because there are many declarations with regards to li and ul items, so are the CSS statements above correct? Thanks a lot!

[Marshall]

Give your <div> unique id's then do this

#divone #menuone li, ul {list-style-type: none; text-align: center;}

#divtwo #maintwo li, ul {list-style-type: square; text-align: left; list-style-position: inside; }

HTML

<div id="divone">
<div id=menuone">MENU</div>
</div>

<div id="divtwo">
<div id=menutwo">MENU</div>
</div>

And so on.

Marshall

[noclu]

hey nice fix, works like a charm. THANKS!

[Xapti]

I never considered doing such tricks so I'm not knowledgable on it, but wouldn't "#main ul, li{}" be altering all ULs which are somewhere inside #main, as well as all LIs (on the page, regarless of #main)?
If that's not the case, is there no way to style select like that without having to repeat the same style properties over again for the new selector?