Dropdown/dropline Menus Any simple ones out there?

[Mordent 0]

Hey all! It's been a while since I've shown my face around here, but I figured you folks would be just the sort to give me a pointer towards what I'm looking for.

 

So, I'm in the process of creating a website (pretty much from scratch), and it's come to the stage where I've got to spruce up the navigation bar a little. I'm not all that confident in CSS to take too big a stab at what I want to do myself, and any examples I can find either don't fit the HTML structure I'm looking for, seem overly messy (have 101 variations depending on browser - although that's mainly IE's fault), have some funky CSS syntax or have a thousand lines of code.

 

In essence, what I'm after is a menu system that is:

 

Customisable - i.e. I can change background colours, images, and the contents of the menu without having to worry too much about changing the CSS to keep up

Either entirely CSS-based, or a combination of CSS and JavaScript (I'm a complete newbie to JS, so would rather not include it if possible)

Either dropdown or dropline (I'm not overly fussed which)

Lightweight - i.e. don't require a massive chunk of CSS to implement

Simple - no fancy rounded corners and so on, please

I gather that a Google search of any combination of the words "menu" "css" "dropdown" "dropline" and so on will turn up more results than you can shake a stick at, but 90% of them either don't fit my criteria or wouldn't fit my site, plus I have a lot of difficulty picking them apart to work out how they do what they do. In an ideal world I'd like to have it built from scratch so I don't have copyright issues to worry about and get a decent understanding of how to make them in the process, but this is by no means necessary.

 

Suggestions are welcome!

 

For those wondering, the HTML for my menu has a structure similar to the following:

 

<div id="nav">	<ul>		<li><a href="">Item 1</a></li>		<li><a href="">List 1</a>			<ul>				<li><a href="">List 1.1</a></li>				<li><a href="">List 1.2</a></li>				<li><a href="">List 1.3</a></li>			</ul>		</li>		<li><a href="">List 2</a>			<ul>				<li><a href="">List 2.1</a></li>				<li><a href="">List 2.2</a></li>				<li><a href="">List 2.3</a></li>			</ul>		</li>		<li><a href="">Item 2</a></li>	</ul></div>

[HannahI 0]

Hey

You are getting the hang of it but it is really DHTML is what you need. There is a good tutorial at http://forums.xisto.com/no_longer_exists/.

Cheers

[Nameless_ 1]

Yeah, I'm looking for something like that as well, I've been posting at Xisto forums and no one seems to be replying, so I might make a thread on it somewhere...