I have built a shell for a site I am developing and it employs a navigation fly-out menu built in css. I have styled the ul and li items to do the fly out. One of the things I did was to set list-style: none; so I wouldn't get bullets, which all works fine. The one problem I am having now is that anywhere else I am using a ul it is picking up this list-style: none; I defined a style for the main content area and am able to control other aspects of the ul tag, but am unable to get it to show bullets. Here is a link to the page in question: http://www.denverderm.com/div_test/css_test3.asp and here is a link to the stylesheet: http://www.denverderm.com/div_test/style.css Any one know how I might go about getting the bullets to work? FYI: the code for the menu starts on line 124 and what I have done to try to override it starts on line 45. Any help appreciated.
You must consider the cascade and inheritance. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> <meta name="editor" content="Emacs 21" /> <meta name="author" content="Gary Turner" /> <meta http-equiv="content-type" content= "text/html; charset=utf-8" /> <title>styled and default lists</title> <style type="text/css"> /*<![CDATA[*/ html, body { margin: 0; padding: 0; } ul#menu { margin: 0; padding: 0px; list-style: none; border: 1px solid black; width: 300px; } #menu li { background-color: gray; } #menu ul { margin: 0; padding: 0px; list-style: none; } #menu ul li { background-color: yellow; } /*]]>*/ </style> </head> <body> <ul id="menu"> <li>menu 1 <ul> <li>menu 1a </li> </ul> </li> </ul> <ul> <li>item 1 <ul> <li>item 1a </li> </ul> </li> </ul> </body> </html> Code (markup): cheers, gary