So, this if the first time I have even attempted a drop down menu of sorts... and I think I've got it working so far, (if I have something wrong there, please let me know as well), the link is below http://willhaynes.com/ my main problem right now is that I can't get the padding to work right. It works fine with the text shoved in the top left corner, but every time I add padding it doesn't work right. I've been trying to add padding to different elements for the past 30 minutes to no avail. if you can figure it out, you'll be my hero.
Hey, I cheated but this put some space in there: div.navbar ul li { float : left ; text-indent: .5em; } Problem with padding is that it will make the drop downs show the white background. Either apply it just to the top level elements or use text-indent. Margin-left or right should provide better results.
That does work somewhat, but... a) the background (a:hover) still "hugs" the text on the right side. b) it doesn't do anything to move the text vertically. I guess you could use line height to get rid of that, but still.
Well IMO you should worry about the fact IE6 eats it alive vs minor tweaks in FF or IE7 li:hover That wont work at all in IE5,6.
I realize that..., and that is what the chunk of javascript is doing in the header. and I just went to check it in IE 6 and that isn't the problem, the problem is that it isn't displaying in a row like it does in other browser... urgh.
No, I know it wasn't the problem. But I went ahead and pointed out it won't work in IE6. Just a FYI. You really should go over to cssplay and look at how Stu does the menus. It will save you some grief.
Ah, Will, you could also use a Suckerfish menu, since you're already planning on using Javascript for the li:hovers. It has its issues when you remove the JS in IE7, but if you just leave it in there, it works fine. http://www.htmldog.com/articles/suckerfish/dropdowns/ The CSS is cleaner (thus easier to tailor to your needs) than Stu's. Stu's menus do work without any JS at all (using IE6 conditional comments to make invisible tables) but the CSS isn't easy to get through.
yes, but the problem with suckerfish is that it has a fixed width. I want the width to be relative to the list items length. (the drop down items can have a fixed width though)
They don't have to have a fixed with. I've made one without and deathshadow made a version of mine without... what happens is, the first li is floated, and has no width, so then the sub li's have to be set to padding:0 (or whatever) and float: none (otherwise the sub li's also try to stack alongside instead of staying beneath each other). The problem with various widths for the mains means the subs might not line up (depends on the style whether this is a problem). If you find the thread I started (here at DP) about Suckerfish and IE7, you'll see deathshadow's no-set-width version. It does work, but read further in the thread about IE7's issues (if you leave the JS in I don't think it's a problem).
heres the thread: http://forums.digitalpoint.com/showthread.php?t=713414&highlight=suckerfish and thanks... dont have time to try it right now, but I will later when I get a chance!