I’m currently working on redoing my horizontal navigation bar. I originally did it through DreamWeaver’s Spry Horizontal Navigation, but I can’t get it to look the way I want it, and it just doesn’t seem right.
So I’m starting over and mixing CSS and PhotoShop to create a Sprite Drop Down menu. My menu is successful easily without the drop down navigation, but once I do add it, then it gets very tricky. I have since been trying to copy my teachers navigation from scantron.com. His looks so perfect, but when I tried copying his code and configuring it for my menu bar, it just looks like crap.
I will post a link later of what it currently looks like (I’m not at my computer now). Anyone know any sites, videos that can give me this? If it helps, I prefer to hand-code everything.
That’s one of Stu Nichols menus and is quite complicated if you don’t understand the concept. It works by using illegally nested anchors and tables and then hiding the invalid bits with conditional comments. It’s not a method I like but is clever and will work in IE6 without javascript.
Here is my version of the suckerfish which is better behaved than the suckerfish examples. The only complicated part is the repeated styles for the multi flyouts but they don’t really need to be altered much to change the styling.
There is nothing special abut styling dropdowns except to remember that when you say something like ul li {background:red} then you also by default will style all nested lists red so you have to then counteract that with a more specific style e.g. ul li li {background:green}.
This applies to all the properties you use and all other elements such as anchors in the nested styles. Just keep track of what you are doing.
e.g.
ul#nav li{/* first level */
float:left;
background:red;
}
ul#nav li li{/* second level */
float:none;
background:green
}
ul#nav li li li{/* third level */
background:orange;
}
Avoid the child selector (>) if you want ie6 support as it doesn’t understand it.
I decided to try the one I was working with again, since I felt I was so close. I got it, but it’s not rolling over properly. The buttons are suppose to turn a darker shade. You may notice that the drop down looks eerily similar to that of my teachers.
Ok I don’t mean to bump again, but I finally figured it out. I was missing where it said “Classes” in the HTML <li> tags. I was mainly looking at the style sheet.
