horizontal menu bar with sub menus

[jhatter]

Please could someone make the following horizontal menu bar, with sub-menus work? Ideally with red background and grey hover state and with no jQuery just CSS.

I have tried countless times but can't get it to work properly. I was just about to chuck my laptop out of the window when I thought about the good folk on this forum!

I have supplied the basic CSS with no styling for the sub-menus.

Thanks in anticipation!



<ul id="navtabs">
<li><a id="leftmostitem" href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="#">Tab1</a></li>
<li><a href="#">Tab2</a>
<ul>
<li><a href="#">Sub Item 1.a</a></li>
<li><a href="#">Sub Item 1.b</a></li>
<li><a href="#">Sub Item 1.c</a></li>
<li><a href="#">Sub Item 1.d</a></li>
</ul>
</li><li><a href="#">Tab3</a></li>
<li><a href="#">Tab4</a></li>
<li><a href="#">Tab5</a></li>
</ul><ul id="navtabs">
<li><a id="leftmostitem" href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="#">Tab1</a></li>
<li><a href="#">Tab2</a>
<ul>
<li><a href="#">Sub Item 1.a</a></li>
<li><a href="#">Sub Item 1.b</a></li>
<li><a href="#">Sub Item 1.c</a></li>
<li><a href="#">Sub Item 1.d</a></li>
</ul>
</li><li><a href="#">Tab3</a></li>
<li><a href="#">Tab4</a></li>
<li><a href="#">Tab5</a></li>
</ul>
[ICODE]

#nav {width: 970px; padding: 0px 8px 0px 8px;}

#navtabs{
margin: 0;
padding: 0;
font: bold 10px Tahoma;
background: url(img/greynavbg.jpg) repeat-x;
list-style: none;
float: left;
width: 950px;
}

#navtabs li{
float: left;
}

#navtabs li a{
float: left;
color: #666666;
padding: 5px 20px 10px 20px;
text-decoration: none;
background: url(img/greybg.jpg) top right no-repeat;
border-top: 1px solid #b0b0b0;
border-bottom: 0px solid #333333;
}

#navtabs li a#leftmostitem{
border-left: 1px solid #cf3638 ;
}

#navtabs li a#rightmostitem{
border-right: 1px solid #cf3638 ;
background-position: top left;
}

#navtabs li a:hover{
color: white;
background-image: url(img/redoverbg.jpg);
border-top: 1px solid #cf3638;
}

[Beverleyh]

On face value the CSS looks OK so what's not working exactly? Please provide a full description and supply a link to the page too.

[jhatter]

Thanks for your reply Beverley.

I can't get the sub-menus to work correctly and I have since deleted the css of the attempts I made at it.

So my question really is how do I style the sub menu to mimic the top level navigation, which as you point out works and looks OK.

This is the first navigation system with a sub-menu I have tried to do, but I couldn't find any useful tutorials.

Thanks

[Beverleyh]

Sorry, we still need a fuller explanation;

Is this the complete code? Was there once a javascript file included that you've removed because you want to convert to CSS? Is this a menu you have coded yourself or one you're trying to adapt from DD?

If this is/was a DD script, please post the link to the demo page. If this menu is lifted from another site, please post a link to that also. Or provide an examplelink of the menu look you want to achieve.
It would also be helpful if you could post the link to your complete working/test page.

In your example code, you seem to have 2 identical lists - one pasted directly above the other - is this intentional?
What are you hoping to achieve with these 2 identical menu lists? Are you hoping that one of them will become a further sub-menu?

Your HTML also appears to be missing an identifying class for the nested list/sub-menus so they can be targetted easily in the CSS/javascript (if there was a javascript file) Is this something that you have removed?

Lastly, please clarify what you mean when you say you cant get the menus to work correctly. At the moment I'm still unsure whether your definition of work means; that sub-menus dont dropdown (javascript?) OR that its just the look of the menus that you need help with (ie - getting the background image to show and change on hover).

[Beverleyh]

There may be something here you can use: http://www.dynamicdrive.com/style/csslibrary/category/C1/

[jhatter]

Sorry I think I managed to utterly confuse you and any one else who took the time to read my thread.

I attempted to create a horizontal nav, with drop down menus, by combining and altering several versions I found on the web. I botched this up and got confused and frustrated - never a good combination!

I then posted on this forum, badly written explanations and partial CSS/HTML in the hope that someone would just do it for me - a bad assumption on my behalf!

So this morning I found a neat menu that did what I wanted it to do & adapted this for my own purposes.
http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/

I have put this into the framework of my site and appears to work OK in Safari - I haven't done any other browser testing yet.
http://www.johnhathway.co.uk/moseley/css-2-saca-3.html

Thank you Beverley for your time, suggestions & patience!

Best regards, John

[Beverleyh]

Ah, I see - well, I'm glad you found a DD menu that you can use. I like the all levels menu too and it looks very nice on your page.

Good luck with the rest of the site!