CSS Horizontal sub menu help

[apples]

I need help with this menu. I’m very new to css. What I’m trying to do is create a horizontal menu with sub menus that are horizontal too. Able to do it with the Home tab, but whenever I try to add the horizontal sub menu’s for the other items I can’t get it to work…Under major pressure to get this done in the next couple of days. Can someone help me on what I’m doing wrong.

Thanks, here is the code:

<div id="navigation">
<ul class="mainMenu">
<li><a href="#" class="selectMenu">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Voice</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Assistance</a></li>
<li><a href="#">Links &amp; News</a></li>
<li class="noBg"><a href="#">Contact</a></li>
</ul>
<a href="#" class="signup"></a>
<br class="spacer" />
<ul class="subNav">
<li class="noBg"><a href="#">Our Benefits</a></li>
<li><a href="#">What Our Future Plans</a></li>
<li><a href="#">Our Success</a></li>
<li><a href="#">Ratings</a></li>
<li><a href="#">Latest Blogs</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Comments</a></li>
</ul>
<br class="spacer" />
</div>

[apples]

oops….here it is. I inherited this and don’t know how to get it to function properly. Like I said, I know how to work with CSS just a bit :)

div#navigation-bg{
height:66px; background:url(images/navigation-bg.gif) 0 0 repeat-x;
}
div#navigation-bg div#navigation{
width:922px; margin:0 auto;
}
div#navigation-bg div#navigation ul.mainMenu{
padding:0; float:left; width:567px;
}
div#navigation-bg div#navigation ul.mainMenu li{
width:81px; float:left;
background:url(images/navigation-divider.gif) 100% 0 no-repeat;
}
div#navigation-bg div#navigation ul.mainMenu li a{
width:80px; height:33px; display:block;
line-height:33px; text-align:center;
font-weight:bold; color:#FAF0C2; font-size:11px;
}
div#navigation-bg div#navigation ul.mainMenu li a:hover{
background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}
div#navigation-bg div#navigation ul.mainMenu li a.selectMenu{
width:80px; height:33px; display:block;
line-height:33px; text-align:center;
font-weight:bold; color:#FAF0C2; font-size:11px;
background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}

/*

---

DROP DOWN MENU STARTS

---

*/
ul.subNav{
font:normal 11px/12px Arial, Helvetica, sans-serif;
padding:4px 0 0 0;
}
ul.subNav li{
background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
height:17px; float:left; padding:6px 0 0 0;
}
ul.subNav li a{
display:block; margin:0 22px 0 20px;
color:#84915D;
}
ul.subNav li a:hover{
color:#fff;
}
/*

---

DROP DOWN MENU ENDS

---

*/

div#navigation-bg div#navigation a.signup{
width:71px; height:28px; display:block;
background:url(images/sign-up-btn.gif) 0 0 no-repeat;
margin:2px 0 0 0; float:right;
}
div#navigation-bg div#navigation a.signup:hover{
background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;

[apples]

Nothing changed for me with the code you did :( Do you see how on Home there are submenus of Our Benefits, What Our Future Plans, etc? I need to add submenus that drop down when you hover over them like home for the other Main Menu items. For example, on About when you hover over it, a submenu will drop down with About Us, Affiliates, Newsletter, Serving Area, etc

For some dang reason, I can not get these to work….Where in the code did you add the container? I don’t see it

Thanks for all of your help with us newbies. :)

[apples]

Thanks for the link….seriously going to pull my hair out. Went and looked at and downloaded the Tab Menu. I really have no clue what I’m doing, nothing is working for me…..grrrrrr. Tried manipulating that code to the design and feel that I want and then as soon as I do that, it totally wacks the entire nav bar up. Totally brain fried. How can I beg someone to right this for me :)

[apples]

That would be great :)

Won’t let me upload a screenshot…grrr, tells me could not upload. Tried to send you a private message but that wouldn’t work either. :evil:

Hate to post my email…I’ve gotten lots of junk from doing that. I’ll log back on in a bit and see what you suggest.

Thanks again

Written before I realized screenshot wouldn’t work.
As you see from the screenshot, the submenu is there for HOME but never leaves after you move your mouse away or hover over something else. I want to add submenus for each of the Main menu items so when you hover over each one, a different submenu will appear.

Wow you would be so awesome if you can do this. I don’t know what I’m doing wrong…think I get it and then I mess something else up completely.

[apples]

I’ll check that site out….problem I’ve found on doing a google search is I haven’t found one that shows exactly what I want…I want submenu to drop down horizontally not vertically.

Thanks

[apples]

Sort of….but I want the drop down to go horizontal not straight down. Does that make sense?

Wish I could post the screenshot…won’t let me grrr. When I try,, I get this error: Could not upload attachment to ./files/938_4f99751a61d371bc1a6cce9d9e579f69.

[apples]

Yes….like that…that’s the one I tried to use and manipulate but I kept doing something wrong and couldn’t get it to work with what I’ve already got setup in my css stylesheet

[apples]

Thanks Mike

I’ll try this out on Monday when I get back in the office :)

[apples]

Tested it out…VERY close, this is about as far as I got as well. The problem being, as soon as I put the information where I want the menu to appear, it’s overwriting what I’ve stated it to appear like. It’s looking just like the one from dhtmlgoodies.com My images, fonts, colors, etc are not used :?: How can I redirect it to look at the css it should be

[Eludiac]

Holy moly Mike, you went through a lot of work to make this happen. Kudos to you! Also, thanks to everyone for posting those resources. Im trying to make a horizontal sub-menu too, and these resources were great!

[Kitty Giraudel]

Please, use CodePen or JSFiddle for reduced test cases.

[wolfcry911]

CodePen didn’t exist 5 years ago

[Kitty Giraudel]

Oh, waw. I should definitely pay more attention to post date. :)

[Author]

Posts