Adding drop down in Navigation bar

[mikeL]

Hello all, I been tasked with redoing a website, the preliminary site is complete. However I would like to create a mouse over drop down box in the navigation bar. I've tried a couple different Java scripts, and html code, however I cannot get it to work. If anyone has any tips or ideas, all will be accepted. Here's the website in Question;

http://www.alpenadiver.com/DiveAlpena

[Force Flow]

http://www.google.com/search?hl=en&s...q=f&oq=&aqi=g1

Lots of examples

[mikeL]

Thanks force, That is where my problems begin, I've tried three or four of the examples, copy and pasted code and it doesn't work out, my problem is that this my first exposure to CSS, and don't know if I need to edit any of the CSS files or not. I have a total of CSS files, the index.html only calls two of them, default.css, and thickbox.css

[Force Flow]

Personally, I would take all the layout and formatting stuff out of the default.css file. The default file is just that--for setting defaults. Make another file named layout.css

Second, the reason you're not seeing any dropdowns appear is because there is no code for it in your HTML. All you have is just your first-level navigation items Dive Charters, Diving the Sanctuary, etc)

[mikeL]

I picked up O'Reilly's CSS- the missing manual, looks like I need to learn the nuts, and bolts of CSS.

As for the web-page itself, when I do add the Unordered List tag then a link it only shows up under one of the original links (Diving the Sanctuary, Wreck Sites, etc.) getting it to create a drop down list is my problem.

[Force Flow]

Usually, the HTML goes something like this...you nest a list within a list. Everything else is controlled with CSS.

PHP Code:

<ul>
<li><a href="">title</a>
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
</ul>
</li>
<li><a href="">another title</a>
<ul>
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
</ul></li>
<li><a href="">title with no dropdown</a></li>
</ul> 


[mikeL]

Thanks again force, I'll play around with it and see how it goes.

[joshuab]

Hi...

I found a source which is similar to your question,
have a look at here.
Hope this helps.

[mikeL]

joshuab, the mouseover you linked is the one I've been working on. however when I copy and paste the code that is where I run into problems, the links from the mouse over code show up next to my horizontal nav bar, in the vertical position.

[Force Flow]

Don't use javascript for this. It's not necessary. It can be done more simply with just CSS.

[mikeL]

Well I'm back, not having any luck with the drop down list, as you can see in the link. I used the code you gave me Force, however I think something else is controlling the layout.

http://picasaweb.google.com/lh/photo...eat=directlink

[Force Flow]

HTML provides the structure...CSS provides the layout. You'll need to work with the CSS some more.