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:
CODE
<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>
<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>
