Creating a sub menu

[oggyswain]

How do I create a sub menu from this code.

 

<div class="nav-bar">

<ul>

<li><a class="current">Home</a></li>

<li><a href="about-us.html">About Us</a></li>

<li><a href="testimonials.html">Testimonials</a></li>

<li><a href="services.html">Services</a></li>

<li><a href="events.html">Events</a></li>

<li><a href="contacts.html">Contact Us</a></li>

</ul>

 

Thanks

[Andrea]

<ul>
<li><a class="current">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="services.html">Services</a>
<ul>
<li>Jodeling</li>
<li>Under-water Basket Weaving</li>
<li>Flea Training</li>
</ul>
</li>
<li><a href="events.html">Events</a></li>
<li><a href="contacts.html">Contact Us</a></li>
</ul>

[oggyswain]

You have the answer for me before I even put up the question.

 

Thanks Again.

[oggyswain]

How do I get it to be collapsable. Right now it stays under the original menu. I would like it to collapse under the heading.

[Andrea]

Collapsing is a bit more complicated - that requires some CSS work and for IE also JavaScript. Look for suckerfish menues - or Eric has a nice collection of CSS Nav Menues here: http://www.visibilityinherit.com/tools.php

[oggyswain]

Hi Andrea,

 

I have been fooling around with the code you recommended. I am confused.

 

This is what I get.

 

http://nextlevels.ca/test.html

 

Any suggestions?

[falkencreative]

I'm not sure what examples you are working from, since the link that Andrea provided had several different options for dropdown menus. Personally,I usually use suckerfish menu: http://www.htmldog.com/articles/suckerfish/dropdowns/ (or the jquery version of it which adds some minor javascript based effects: http://users.tpg.com.au/j_birch/plugins/superfish/)

 

In your code, it appears like you have nested unordered lists, which is correct, but I'm not seeing any CSS styling in place to hide/show the submenu or to style those sumbenus any differently than the horizontal navigation.