<ul> inside an <ul>

[andy2004]

Im having some problems creating a menu, I think I need an <ul> inside an <ul> but when I do what im doing now I get a huge indent which severly limits the amount of text I can include.

the link is,

http://www.22nd-reg.com/HTML/cbs/services.html

The CSS file is in the same folder.

Could someone please advise me on what i can do to decrease the indent or what else i could do to achieve the same effect?

ALSO: If possible...i really wouldnt like an edited version of my code, i would like it explained what im doing wrong and how i can fix it...Thanks

[cbstudio]

I don't know if this is the best way but my suggestion would be to get rid of the ul tag all together. You can just find or make an image that looks like a bullet if that's what you want and then put it a few spaces then the link. And on the subheadings you can just put a few spaces before the bullet.

[BonRouge]

Let's look at the html first... <div class="nav">
<b>Navigation</b>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./contact.html">Contact us</a></li>
<li><a href="./services.html">Services</a></li>

<div class="subnav">
<ul>
<li><font size="1.5">New Build</li>
<li>Extensions</li>
</ul></font>
</div>
<li><a href="http://">Link 4</a></li>

</ul>
</div>
You see that div that says 'class="subnav"'? Well, you can't do that. After a closing 'li' tag, you have either an opening 'li' tag or a closing 'ul' tag. To add a submenu, you need to put the ul (without the div tags) inside the 'li'.
Those font tags? They're bad - get rid of them. Use CSS to control the style.
As for your original question, those indents are controlled with margins and padding. Your ul's and li's have default margins and padding. The problem is that the defaults are different in each browser (they're bigger in IE). So, you need to set them yourself. If you want bullets (or some other kind of list style) you need about 20px of padding.
Hmmm... that's about it. I'd show you some code, but you specifically asked us not to.

I hope this helps.

[ray326]

And ignore the extremely bad advice you got from cbstudio.

[spufi]

<div id="nav">
<h2>Navigation</h2>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./contact.html">Contact us</a></li>
<li><a href="./services.html">Services</a></li>
<li>
<ul>
<li>New Build</li>
<li>Extensions</li>
</ul>
</li>
<li><a href="http://">Link 4</a></li>
</ul>
</div>

CSS:

#nav {
CSS stuff
}

#nav h2 {
CSS stuff
}
#nav ul {
CSS stuff
}
#nav ul li {
CSS stuff
}
#nav ul ul {
CSS stuff
}
#nav ul ul li {
CSS stuff
}

See Taming List article in my sig for more details.

[cbstudio]

And ignore the extremely bad advice you got from cbstudio.
ouch.


i personaly have a distaste for the styling in the little black dot or square of a ul... I'd rather make my own.

[ray326]

i personaly have a distaste for the styling in the little black dot or square of a ul... I'd rather make my own.But there's almost never a good reason for putting presentation into the HTML. There are a couple of good CSS options (list-style-image (http://www.w3.org/TR/CSS21/generate.html#propdef-list-style-image) and li backgrounds) that completely eliminate the introduction of non-semantic garbage.