Hi, would anyone know where I can find a tutorial for this type off menu?

Cheers

If you view Stu's code you should be able to see how it's done.

Picking it apart now....

*its going to be a long night...!*

Cool! finished it!

Here it is!

any errors in the code, feel free to let me know!

Looks good Darren, good job !

Hold That Thought....

Messes up the "people" section in IE6 !

Something bad happened in IE6!!!??? That is sort of rare, isn't it?

Originally Posted by rolda hayes

Hold That Thought....

Messes up the "people" section in IE6 !

What's it doing, specifically? It's probably just a matter of a conditional comment. Or check out positioniseverything.net.

tim

the people section is just a list of links at the bottom right of the image.
There is a seperate css file for IE6...

.menu2 li a.top_link span 
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tab_off.png', sizingMethod='crop');
}
.menu2 li a.top_link b 
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tabb_off.png', sizingMethod='crop');
}
.menu2 li a.top_link b.down
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tabdown_off.png', sizingMethod='crop');
}

.menu2 li a.top_link:hover span 
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tab.png', sizingMethod='crop');
}
.menu2 li a.top_link:hover b 
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tabb_on.png', sizingMethod='crop');
}
.menu2 li a.top_link:hover b.down
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/tabdown_on.png', sizingMethod='crop');
}

.menu2 :hover ul.sub li {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/submid.png', sizingMethod='crop');
}

.menu2 :hover ul.sub li.fly 
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/submid_r.png', sizingMethod='crop');
}

.menu2 :hover ul.sub li.subtop,
.menu2 :hover ul :hover ul li.subtop,
.menu2 :hover ul :hover ul :hover ul li.subtop,
.menu2 :hover ul :hover ul :hover ul :hover ul li.subtop
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/subtop.png', sizingMethod='crop');
}

.menu2 :hover ul.sub li.flytop,
.menu2 :hover ul :hover ul li.flytop,
.menu2 :hover ul :hover ul :hover ul li.flytop,
.menu2 :hover ul :hover ul :hover ul :hover ul li.flytop
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/subtop_r.png', sizingMethod='crop');
}

.menu2 :hover ul.sub li.subbot,
.menu2 :hover ul :hover ul li.subbot,
.menu2 :hover ul :hover ul :hover ul li.subbot,
.menu2 :hover ul :hover ul :hover ul :hover ul li.subbot
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/subbottom.png', sizingMethod='crop');
}

.menu2 :hover ul.sub li.flybot,
.menu2 :hover ul :hover ul li.flybot,
.menu2 :hover ul :hover ul :hover ul li.flybot,
.menu2 :hover ul :hover ul :hover ul :hover ul li.flybot
{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/subbottom_r.png', sizingMethod='crop');
}

I'm not sure if this is a bug or a feature, but your down arrow (indicating a drop down) bounces for me in Firefox. There was also a slight delay in the loading of the images for the menu. If you combine them all together onto one image and then use CSS to manipulate the position, you could solve that problem.

Originally Posted by rolda hayes

the people section is just a list of links at the bottom right of the image.
There is a seperate css file for IE6...

I see that you've put in the alpha image filters for the transparency fix; but what you're not telling me is what IE6 is or is not doing. Otherwise how do I know what I'm looking for?

tim

I did in post #9 !!

Sorry that was the problem described not what it should be!

The "people" drop down is not there and the people in the drop down are just listed as blue links in the bottom left corner of the main image.

I'd say it has something to do with these errors:


line 17 column 32 - Warning: discarding unexpected </a>
line 19 column 9 - Warning: missing <li>
line 19 column 9 - Warning: missing </ul> before </li>
line 27 column 5 - Warning: discarding unexpected </li>
line 13 column 1 - Warning: missing </div> before <li>
line 28 column 5 - Warning: inserting implicit <ul>
line 45 column 9 - Warning: missing </ul> before </li>
line 60 column 5 - Warning: discarding unexpected </li>
line 13 column 1 - Warning: missing </div> before <li>
line 62 column 5 - Warning: inserting implicit <ul>

Thanks LadynRed - Ill go through them now.
BTW what did you use to determine the errors?

@Serandfae, heres a screen shot of IE6 FYI.

I have the HTML Tidy extension installed for Firefox, it shows the validation errors according to the page's doctype. Very handy

You can easily spot the errors by w3.ord validation, I always do that. Here is yours:
http://validator.w3.org/check?verbos...2Fmenutest.htm

With the Firefox extension it's not necessary to go to any other site

I just use the web developer toolbar, it has built in validation in the menus, although it does take you to the actual w3.org validation page in order to do it. I find this convenient, however, as seeing the actual validation is useful to me.

Originally Posted by rolda hayes

@Serandfae, heres a screen shot of IE6 FYI.

OK, sorry I didn't quite understand at first what you were saying IE6 was doing. But it looks like LnR answered it already. Something like that looks like a specificity issue, such as putting a style rule on .classname a rather than .classname, for instance, if straight validation doesn't do it.

tim

seeing the actual validation is useful to me.

HTML Tidy DOES show the 'actual validation'.

I use the Developer toolbar too, but prefer to use Tidy for the validation piece, it's just simpler, all on one screen.