Nested list problem

Problem getting rid of circle

[joolsm]

I'm having trouble with a nested list for my menu. I don't want a circle for ul class="main". I do want a circle for ul class="sub" which I want inset.

I've got the inset & circle working for the sub, but try as I might I can't get rid of the circle in main. I know this is my fault, but I can't see where I'm going wrong in main - I've played with negative margins, display and list-style position but got nowhere.

Please can anyone point out where I'm going wrong. Thanks, Jools

<DIV id="links">
<h1>GB3YC</h1>
<ul class="main"><li><A href="http://www.q.html">Home</A></li> <li> <A href="http://www.q.htm">
Coverage</A></li> <li><A
href="http://www.q.htm">History & Location:-</A> </li><ul class="sub"><li><A href="http://www.q.htm">
Silpho (first site) </A></li>
<li> <A href="http://www.q.htm">Octon (present site)</A></li>
</ul>
<li><A href="http://www.q.htm">Technical</A></li><li><A href="http://www.q.htm">Newsletter</A></li>
<li><A href="http://www.q.htm">Membership</A></li> <li><A href="http://www.q.htm">Management
Committee</A></li><li><A href="http://www.q.htm">GB3YC/GB7NY
Link Project</A></li><li><A href="mailto:g.org"><img src="../images/mailbox.gif" alt="email" width="27" height="32">Email
the Keeper</A></li></ul></div>

DIV#links {
font-family: Arial, Verdana, sans-serif;
height: 20%;
background-color: #ffffff;
border: 2px #000080 solid;
font-size: 100%;
width: 100%;
}

DIV#links h1 {
background-color: #000080;
color: #ffffff;
font-size: 105%;
padding: 5px 0px 5px 0px;
text-align: center;
font-weight : bold;
width: 100%;
margin : 0px 0px 5px 0px;
}

DIV#links ul .main {
display: block;
list-style-type: none;
padding: 0px;
margin: 0em 0em 0em -1.5em;
}

DIV#links ul .sub {
padding: 0px;
list-style-type : disc;
display : block;
margin : 0em 0em 0em 0.5em;
}

DIV#links A {
padding-right: 10px;
display: block;
padding-left: 10px;
background-color: #ffffff;
padding-bottom: 5px;
margin-top: 0px;
margin-bottom: 1px;
margin-right: 0px;
color: #000080;
padding-top: 5px;
text-align: left;
font-weight: bold;
text-decoration: underline;
}

DIV#links A:hover {
background-color: #fee2ec;
color: #0000ff;
font-weight: bold;
}

[TryAgain]

If you add this to your styles, bullets for 'main' are gone:

#links ul {
list-style: none;
}

But it don't look good though.

Anyway, maybe you could take a look at this page, seems to have a nice guide to exactly what you are doing:
[simplebits.com...]

[joolsm]

That's a very useful page Tryagain - thanks very much.

Since my original post I've been fiddling on to see if I could solve things. I've altered

DIV#links ul .main {
display: block;
list-style-type: none;
padding: 0px;
margin: 0em 0em 0em -1.5em;
}

DIV#links ul .sub {
padding: 0px;
list-style-type : disc;
display : block;
margin : 0em 0em 0em 1.5em;
}

to

DIV#links .main {
list-style-type: none;
display: list-item;
padding: 0px;
margin: 0em 0em 0em 0.5em;
}

DIV#links .sub {
padding: 0px;
display: list-item;
list-style-type: disc;
margin : 0em 0em 0em 1.5em;
}

Things now seem to be working as they should. Thanks for your help, Jools