My CSS Only Cross-Browser DropDown (100% valid HTML, Tested in IE5.5-IE8, Firefox, Opera, Chrome, Safari)(and Tabbing also works)
Internet Explorer <=6 does not support the :hover pseudo state on anything except links that have a valid href="#", for example:
, so we cannot have a hover state on a div that contains all the dropdown links in IE6, there are some cool (and very dirty solutions) that i will link on the end of the post
Everything in websites consists of positioned boxes, each box also has an effect on another box, for example the box below it.
now we can position a div with the dropdown links (sub-links) below a link, then add position:absolute; the div with the sub-links, and then add a margin-bottom:200px; or border-bottom:dashed transparent 200px; to the link on its hover state
border:bottom solid red 100px;
, and the link will move the div below it, and this happens in every browser identically. (except opera at times, opera seems to ignore the margin, and thus you can either use a average dropdown method or use borders to push the div down).
Now this is great and all, but what about the sub-links that are inside that you hover over? the menu will immediately hide when you move your mouse away from the main link.
now this was a big problem at the start, but because anything is possible in css, and as long as something is being hovered i can do anything to the website, i found a solution.
each dropdown sublink in the div below the main link is being floated against a shifter div (thats what i called it), basically the links are pressed against a very high but very thin shifter div that will make them "float drop" in case that the one of the sub-links expands (increases width).
so one main link moves the absolutely positioned div that contains the sublinks dropdown, in which each and every link has the ability to do the same.
- ¦ the mouses path from the main link to any of the sublinks must remain on top of some link
- ¦ requires extra div's per link, one for shifter one for containing the sub-links
- ¦ the dropdown links have to have a fixed (defined) with
- ¦ the height of the main link has to be fixed (defined)
- ¦ a little dirty example (will post a better example soon)
- ¦ has quirks when hovering and tabbing at the same time.
- ¦ requires some IE5-6 specific css (can be made to work without conditional comments)
- ¦ the dropdown block needs to have a fixed height (usually min screen height of supported screen sizes. this applies only to ie5-6)
- ¦ It's Free
- ¦ Works in all browsers using only CSS without browser specific html
- ¦ Completely valid HTML/CSS (semantically correct xhtml/css) and can be made to work without any IE hacks (will give example later)
- ¦ Has natural tabbing, tabbing works just like that, tabbing can be easily disabled by removing the :focus and :active from the CSS.
- ¦ Works great and smooth in all browsers
The idea itself of general relativity in websites can be taken to much higher and interesting lengths, and this is simply a small example that demonstrates that this area of css has not yet been explored.
Example ready made Code
Other available dropdowns
I found this post after i made my dropdown, i was slightly dissapointed that my css dropdown was not the first pure css dropdown, Notice that only one of them is pure CSS, it involved very dirty/invalid/heavy code, and does not support tabbing.
i will post more examples of how this method of relative html can be used to make very interesting css features.
Stu Nicholls has designed his own version of this dropdown
The software referenced within this license is distributed free of charge and free from any warranty. It may be used freely for any purpose whatsoever. The author created and released this work because he is genuinely a Nice Person!
Users are encouraged to use, modify, distribute, improve and otherwise manipulate the code. After all, it’s free.
The author sincerely hopes that end users enjoy and appreciate the hard work that went into creating it, and would appreciate being referenced in future modifications of the code since it was based on the author’s original concept and work.
Users are nonetheless encouraged to provide reciprocity whenever possible as it provides positive reinforcement and encouragement to the author. Furthermore, the minimum reciprocation I ask is to leave a ‘thank you’ comment in the area below: