CSS dropdowns :s

[Hellusius]

I have been trying to make a decent Horizontal dropdown menu, but lately I have been trying to follow tutorials, but mostly I have got to admit that there is little explanation, and there seem to be allot of different approaches to it, which actually makes me sorta dizzy :(.

I am really not sure what to do....

Basically I want to have a vertical bar with links on which when hovered over a dropdown menu comes down with possible selections you can make from, I also want a second layer which basically have to come next to the previous downdown, so basically Vertical on the right side.

Is there any Good and well explaning tutorial you could advise me to have a look ?

I would really appreciate it:)

[kiwibrit]

I think htmldog (http://www.htmldog.com/ptg/archives/000050.php) has what you want.

[Hellusius]

Thanks allot for the link that really helped me out...and it's quite understandeable as well.

The only things I would like to know, are the following two things, is it link possible to make dark border at the top and bottom of the mainlinks that drop a dropdown when hovered over, I tried to apply a border size and color in the .nav, .nav ul, but that didn't work. Perhaps I should apply a special table around it? not sure..

The other thingy is, that I added a little arrow to the first link in the first dropdown from the left, now I would like to shift that arrow to the complete right side of the dropdown, sorta like it indicates that when hovered there will appear another dropdown next to it.

EDIT: also my code doesn't seem to fully respond if I put in the stylesheet :s, any idea's on that?

[Hellusius]

ohw the website can be found here (http://warnicro.awardspace.com/index2.html)

[Kravvitz]

1) The first step should always be making sure that your code is valid.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

2) <li><span style="float:right">&gt;</span><a href="#">Sub link 1</a></li>

[Hellusius]

I never understood those validators really, and I don't think there is much of a flaw in the code, there has to be someting that buggs my stylecode when I put it in my stylesheet instead of directly in my page.

on the second thing, would be nice to have some explaining on it, cause I had to look it up what it exactly ment.

Also I would to know if there is a good way to make a a border at the top and bodem of the mainlinks.

[Kravvitz]

1) So what if my coding doesn't validate? (http://www.webdeveloper.com/forum/showthread.php?t=127809)

2) ul.nav a {
border-top: 4px solid #900;
border-bottom: 4px solid #900;
display: block;
}
ul.nav ul a {
border: 0 none;
}

[Hellusius]

Great, that validator at the second linked is actually very nice, it fixed a little thing that apprently seemed to bug it, no idea why:S but thnx for that.

The borders that I wanted are not working, it's about the same thing as I tried to do, but it somehow breaks up the px vertically, not sure why, but just look at the site atm and you'll see what I mean.

[Hellusius]

Ok thats really weird, and I am getting really puzzled by it as well, but I suddenly fixed while I was trying to fix another problem.

I was trying to put a margin at the .nav li ulwhen I did that, it actually put the entire link with the borders correctly, I change the margin to "0" now, but how does this margin effect the correction of the main ul?

[Centauri]

<!-- and --> are not valid comment identifiers in css.

[Hellusius]

I removed those ;)

Btw, that arrow in the first dropdown still isn't working properly with that span tag >< I tried adding a padding to the li ul li, but that just messes up the hovering.
For an example with the arrow, you could take a look @ http://htmldog.com/articles/suckerfish/dropdowns/example/

[Kravvitz]

If you're testing in IE7, then no the arrow doesn't work right because IE7 is a piece of junk.

You'd probably be better off using a background image like in that example.

The borders look fine to me?

[Hellusius]

The border is correct now, still not too sure why but ohw well....

the arrow is still not correct, it still goes through the border and when you hover over the link, you will see the arrow jump back to the correct possition.

[Kravvitz]

It's doing that because you made the <li>s and <a>s in the 2nd level <ul> wider than it, so they are overhanging its right border.

[Hellusius]

That is correct, I did that cause else the borders would be bigger than the link part, so that way it wouldn't look right, but how is text supposed to go through a border? >< thats just weird imho, anyway, is there a way to fix this perhaps?

[Kravvitz]

I disagree.

Anyway, you could change what background-position (http://www.w3.org/TR/CSS21/colors.html#propdef-background-position) is set to.

[Hellusius]

Splendid, works like a shinning star now:) that is in IF, this is my next and last problem *phew*

This Dropdown isn't working at all in IE, I also noted that IE picked up the colors of the hyperlink information and FF doesn't, is there any explaining to that?