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 (http://www.dynamicdrive.com/dynamicindex1/indexc.html)?

[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 (http://ne-media.com/test/home_test.html)

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

[boogyman]

put a background color on the whole menu



ul#navmenu-v {
background-color: #__________;
}

where it matches the color of the background you use

[nate51]

put a background color on the whole menu



ul#navmenu-v {
background-color: #__________;
}

where it matches the color of the background you use

I would but I need that left side to be 119px because if it's not it throws off the whole page.

[boogyman]

you are assigning a background color, which has nothing to do with the (119px) whether thats height or width.

[nate51]

you are assigning a background color, which has nothing to do with the (119px) whether thats height or width.

It's hard for me to explain, but what I mean is even if I change the colour of the backing (which is actually this part of the code)

/* Root Menu */
ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: #86ABC5;/*This controls the bg colour*/
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

the content space gets pushed to the right.

I have uploaded these examples...
BG colour changed
http://ne-media.com/test/home_test.html

Width lowered to fit properly (drop menu gets messed up)
http://ne-media.com/test/home_test3.html

How the page is supposed to look (with no drop menus)
http://ne-media.com/test/home_test2.html

I am just finding too many things are linked in the CSS and if I change one part it changes 3 other parts in the process.

I hope this is a good explanation I know I am bad at explaining what I am looking for.

[boogyman]

/* Root Menu */
ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: #86ABC5;/*This controls the bg colour*/
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
i said apply it to the whole menu, not the anchor like you are doing above.

also you have your submenu listed as

<ul id="navmenu-v">
<li><a href="#"><img src="images/nav/stock_btn.jpg" name="stock" width="119" height="54" border="0"></a></li>
<ul>
<li><a href="#">Sub nav item</a></li>
<li><a href="#">Sub nav item</a></li>
<ul>
<li><a href="#">Sub nav item</a></li>
<li><a href="#">Sub nav item</a></li>
</ul>
</ul>

you need to apply the sub-menu and the sub-sub-menus inside the parent list item like


<ul id="navmenu-v">
<li><a href="#"><img src="images/nav/stock_btn.jpg" name="stock" width="119" height="54" border="0"></a></li>
<ul>
<li><a href="#">Sub nav item</a></li>
<li><a href="#">Sub nav item</a></li>
<ul>
<li><a href="#">Sub nav item</a></li>
<li><a href="#">Sub nav item</a></li>
</ul>
</li>
</ul>
</li>
...
</ul>

delete the </li> in red and add the </li> to appropriately... also I assigned white space so you could see exactly how it would get laid out.

[nate51]

Hey Boogyman,

I got the menu to work the way I wanted it to, it was actually these factors.


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

The width here controlled the width of the root and all widths after that for the rest of the menu options


/* Root Menu */
ul#navmenu-v a {
border: 1px solid #FFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
padding: 0 6px;
display: block;
background:#86ABC5;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

The border was controlled here (border: 1px solid #FFF; )
Once I got rid of that it eliminated the border on the button I had.

Also changed the background-colour to match the button so it all blends in now.

To keep the boarder around the menu I added the border code to the menus seperately

/* 2nd Menu */
ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
border: 1px solid #FFF;
border-right-color: #000000;
border-bottom-color: #000000;
background: #5E8EB3;
color: #FFFFFF;
}

And this part shrunk the gap between the root button and the drop downs

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 119px;
}

I was running into an issue where changeing the 119px width left a gap between my main button and the drop down, so it would appear then when I try to use the drop down it would disappear because of the gap.

The only thing I need to know now is if it's possible to throw all this code from the html page into an external file so that if anyone wants to add or remove categories they can change it on one file instead of every page.

But Boogyman thanks for your hep with this one and keeping with it.

[boogyman]

if your host supports php or some other type of server-side language you can either include them or use a database.

if not there really is not plausible way that would consistently give you the categories accordingly. It could be done with javascript, however many users do not have javascript enabled and thus those users wouldn't see your menu.

[nate51]

If I was to go way of javascript for the content in the drop down menus are there any tutorials for that?

[boogyman]

take your pick http://www.dynamicdrive.com/dynamicindex1/indexc.html