ul drop menus add a sub?

[nate51]

I was wondering if anyone knows if this is possible and if so where I can find out more information on how to accomplish it.

I have vertical drop downs on a site but some categories will need sub categories.

This is the code I have for example menu1

<div id="menuoptions" class="menudropdiv">
                    <a href="#">Drop Option1</a>
                    <a href="#">Drop Option2</a>
                    <a href="#">Drop Option3</a>
                    <a href="#">Drop Option4</a>
                    </div>

I wanted to add sub menus is there a way to go about that or do I need new code?

-- Nate

[Nile]

What do you mean "sub menus"? Like a hover over, and it shows up?

[nate51]

Sorry I mean a multilevel like

*root menu
Option1
Option2
- Sub Option1
- Sub Option2
-- Sub Option1b
-- Sub Option1c

Type of structure.

[Nile]

And you wanna use divs, or lists?
Will this work?:

<style>
.sub {
position: relative;
left: 8.03px;
}
</style>
<div>
Home
<div class="sub">
A lot<br />More<br />How much?<br />A lot</div></div>

[Medyman]

Sorry I mean a multilevel like

*root menu
Option1
Option2
- Sub Option1
- Sub Option2
-- Sub Option1b
-- Sub Option1c

Type of structure.

Have you looked at these?

[nate51]

Hey Medyman,

Yes I have seen those, I have tried them all, the reason I want to stick with the code I am using is because it doesnt mess up the page I am using it on plus it's very easy for myself or any future developer who takes over the site to change and understand plus I am trying to hold onto a slide in affect I have on this one.

If I have to go with another one and lose the effect I will but for now I want to see if I can just use what I am using and add to it.

[boogyman]

plus it's very easy for myself or any future developer who takes over the site to change

that is incorrect, you are trying to brute force a list, so if an actual developer came along after, he/she would have to re-write your script to use an unordered list like you should be using.

[nate51]

Oh....

I didn't know it was an issue that bad.
I will go about it a different method then.

I'm a noobie with drop downs so I didn't know it would be a problem.

[boogyman]

<ul id="menu">
     <li><a href="/link/path">TITLE</a></li>
     <li><a href="/link/path">TITLE</a></li>
     <li><a href="/link/path">TITLE</a><ul class="sub">
          <li><a href="/sub/link/path">SUB-TITLE</a></li>
          <li><a href="/sub/link/path">SUB-TITLE</a></li>
          <li><a href="/sub/link/path">SUB-TITLE</a><ul class="sub">
          </ul></li>
     </ul></li>
     <li><a href="/link/path">TITLE</a></li>
</ul>

then use the styles described at http://www.alistapart.com/articles/dropdowns/

[nate51]

boogyman,

Thanks for the link and code.

I was looking into this tutorial which they said has elements from the Suckfish drop downs
http://qrayg.com/learn/code/cssmenus/

The only issue I am having with it now is it does everything I am looking for but the main (*root) button that starts everything off is a jpg image rollover.
This line in the CSS is messing things up for me.

/* Root = Vertical, Secondary = Vertical */
ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px; /*For KHTML*/
  list-style: none;
}

With the width being 160px a gray box is appearing under the jpg button as the button is only 119px wide, but when I shorten the width or even eliminate it, the drop menus are also affected by this. ex located here

Has anyone used this code with a jpg button as the root and found an effective way of doing this?