Podcast Episode 9 – Bulletproof Drop Down Menus
This podcast will show you how to create pure CSS drop down menus without any JavaScript.
Podcast Episode 9 – Bulletproof Drop Down Menus from Stephen Korecky
Watch us on iTunes
Discussions
RSS Feeds
Archives
Follow Me On Twitter!
Categories
Great Idea for a podcast, but it would be even better if you had the sound ON.
B. Ackles
22 Dec 08 at 1:23 am
@B. Ackles
Sorry, not sure what happened. Fixed now!
Stephen Korecky
22 Dec 08 at 10:09 am
Thanks for fixing it. Nice screencast by the way.
B. Ackles
22 Dec 08 at 5:53 pm
I’m having trouble building multiple dropdown menus using class (instead of id). How do I get my ‘Sub Item’s to dropdown?
Here’s my HTML:
http://pastie.org/345312
Here’s my CSS:
http://pastie.org/345311
B. Ackles
22 Dec 08 at 9:56 pm
Your code works fine for me, but if your using that HTML “as is” your missing your doctype and basic HTML outline. However if your referring to your submenu items floating left instead of down, simply add “clear:both;” to your dropdown li like so:
.dropdown li {
float:none;
clear:both;
}
hope this helps!
Stephen Korecky
22 Dec 08 at 10:42 pm
Thanks for taking a look at my code. The ‘clear:both;’ fixed my problem.
The pastie was only part of my html. I didn’t forget the doctype.
B. Ackles
22 Dec 08 at 10:58 pm
For some reason even after setting the Z-Index on the “Flyout” as I’ve called it…I have to use position:fixed; in order to get this to show. Which is fine the only downside is when you scroll the page and it then appears in the middle of the page.
I’m using a wrapper div, with a header, content, and footer div inside. I have the menu in the header. If I use position:absolute; the menu goes behind the content div even with z-indexes set.
Thoughts?
Chris
9 Jan 09 at 10:16 am
Nevermind, just found something…I had to remove the overflow:hidden; from my header div. It is now working properly in Firefox and IE. Thanks!
Chris
9 Jan 09 at 10:19 am
Nice, Glad you got it figured it out!
Stephen Korecky
9 Jan 09 at 10:23 am
[...] articles out there: Bulletproof HTML, bulletproof page menu labels, bulletproof rounded corners, bulletproof drop-down menus, and so [...]
Adam Ducker - Overused Words: Bulletproof
8 Feb 09 at 10:22 pm
[...]but there has to be a better word to use here. I can’t think of one though.[...] That’s the problem, and it’s hard coming up with a good title. More people will be attracted to the title I have used above than “Drop Down Menus Are Fun!”. So while some people feel bulletproof is “overused”, I feel that it fits for this tutorial, since I don’t use JavaScript which some people disable, and I do use CSS which almost no one would disable.
But thank you for posting the article, maybe I’ll get some hits from it!
Stephen Korecky
9 Feb 09 at 9:09 am
I know it’s a bit old post but I think it could work in IE6. The only thing that don’t work is pseudo hover css class that’s not supported in IE6. There’s a solution for that at http://www.devinrolsen.com/tutorials/css/css_hover_fix/index.php
The only downside is that it uses javascript (.htc file).
Leviathon
26 Feb 09 at 9:16 am
@Leviathon
Thank you for sharing that! I know there are still a handful of people that have to support IE6… I’m sorry for anyone that does
Stephen Korecky
26 Feb 09 at 9:37 am
It doesn’t work for me in IE 7! Works fine in FF and Safari.
Elmer
14 Mar 09 at 12:17 am
With the testing that I did, it worked fine in IE7 running on Windows XP with SP2 installed. Which OS are you testing on? if XP is it SP2?
Stephen Korecky
14 Mar 09 at 2:04 pm
This is the first of your podcasts I’ve downloaded from iTunes. I must tell you I am impressed!
Just stopping by your site for the code.
I’ve subscribed and will certainly check out the others.
Thanks for the knowledge!
QA
21 Mar 09 at 3:08 am
You cannot Tab to the links in the drop down, so this wouldnt be accessible to Keyboard only users, this could just be an issue because im using IE7.
Other than that, nice video
Chris
22 Mar 09 at 4:26 am
@QA Thank you very much.
@Chris Unfortunately there will always be flaws like this that you’ll need to find way to make work for accessibility. But trying to keep a short but informative podcast limits me from going over *everything*
However you’re completely right and in some situations, a better drop down menu may be needed.
But having used this is a real word situation has worked out great! But thank you for your comment. I think a future podcast on accessibility maybe in order
Stephen Korecky
23 Mar 09 at 8:02 pm