Drop-down menu with tabbing navigation

[marynorn]

I'm creating a website which requires a horizontal navigation bar expanding into several drop down menus and sub menus when you hover the mouse over them. Easy so far, I can do that in either CSS or javascript. The problem is that it has to be fully accessible, which means... tabbing navigation. And while I can tab to a menu link in both CSS and javascript, I can't get the menu to actually drop down in either version.

I'd prefer to use CSS for the menu, which is why I'm posting this here, but if anyone has javascript advice, I'd love to hear it too.

[marynorn]

Okay, ten minutes of research lead me to update to Spry 1.6. Sorry folks.

Although... I'd still like to see if there's a CSS method out there.

[rangerjoe]

Hi, I was wondering if you can help me. I've created a horizontal menu bar using seperate images, and I have them using a drop down. Now I want to create a third-tier dropdown from one of the initial dropdown menu items.

I'm using the AnyLink Drop Down Menu. Can you help me? You can email me if you'd like, or post here.

Thanks,
Joe

[RuggerRob]

I've used CSS Horizontal List Menu- by JavaScript Kit on my site (www.fcps.edu/LangleyHS/). The base code only provides for one sub-menu, but I've adapted the code to allow for a second sub-menu (or a sub sub-menu). The sub sub-menu is offset from the sub-menu using "left: 40px" which can be adjusted as needed.

This is the code I added for the sub sub-menu which follows /* Sub level menu links style */ in the CSS code:

/*NEW - Sub sub-level menu*/
.horizontalcssmenu ul li ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
left: 40px; /*this is the offset for the sub sub-menu to allow the sub-menu to be seen*/
display: block;
visibility: hidden;
z-index: inherit;
}

/*NEW- Sub sub-level menu list items*/
.horizontalcssmenu ul li ul li ul li{
display: inherit;
float: right;
}


/*NEW- Sub sub-level menu links style */
.horizontalcssmenu ul li ul li ul li a{
width: 65px; /*width of sub menu levels*/
display:block;
font-weight: normal;
padding: 2px 2px;
background: #E9B229;
border-width: 0 1px 1px 1px;
}

Your html looks like:

<li><a href="#">Menu Item</a>
<ul>
       <li><a href="#">First Sub Menu Item</a>
	<ul>
              <li><a href="1.html">1st sub sub-menu Item</a></li>
              <li><a href="2.html">2nd sub sub-menu Item</a></li>
        	<li><a href="3.html">3rd sub sub-menu item</a></li>
        	</ul></li>
        <li><a href="#">Second Sub Menu Item</a>
              <ul>
              <li><a href="a.html">1st sub sub-menu Item</a></li>
              <li><a href="b.html">2nd sub sub-menu Item</a></li>
        	<li><a href="c.html">3rd sub sub-menu tem</a></li>             
        	</ul></li>
    </ul>
</li>

[rangerjoe]

Thanks for helping...the only problem is I'm using images as the menu items, instead of just plain text...

Joe

[RuggerRob]

You can use an image in place of the text in the menu (with the image still linked). However, you'll need to change the CSS to fit the images you're using (width and height only). I've tested it with images that are all the same size and it works just like the "text" version.

[rangerjoe]

Thanks alot, i appreciate your time. I'll try it and let you know if it works.

Two quick questions:

What if my top nav images aren't all the same width? Where in the CSS would I adjust the code?

How do I code it in order to have every one of my images sit right next to each other without any spacing?

Thanks and happy new year,
Joe

[BLiZZaRD]

Have a look at my tutorials on Horizontal Nav Menus with Images. They should explain a bit more. And they are CSS only, which is a bonus

[rangerjoe]

You can use an image in place of the text in the menu (with the image still linked). However, you'll need to change the CSS to fit the images you're using (width and height only). I've tested it with images that are all the same size and it works just like the "text" version.

Hey Rob, I got the sub levels to work, but m drop downs are each seperated by a space and not resting on top of each other. I looked at the <li> code but I don't see anythng that would affect this.

Were do I need to adjust the code in order fr the drop down to list without an empty pace between them?

Thanks for th help,
Joe