I am trying to make a CSS based nav bar that converts a UL/LI list (including sub UL/LI lists that display on hover) into a horizontal nav bar and a sub horizontal nav bar. My current implementation (see picture) works except the sub list is using position:absolute to get its position below the hovered element. I believe that is the source of my problem, as the absolute positioned sub menu doesnt respect the edges of the container, so if the browser gets too small it bleeds off the edge of the container while the top level menu wraps. The other problem i’m having is that it doesnt expand the page vertically when the top level menu wraps, so even though its taking up more space the paragraph following doesnt move down and gets overlapped.
Does anybody have any CSS tips or know of any good examples of a menu like the one I’m trying to make?
Link to image:
http://i47.tinypic.com/288tbn7.png
To this day, the article “Son of Suckerfish Dropdowns” by HTML Dog is still a classic on clean CSS menus with hover.
http://www.htmldog.com/articles/suckerfish/dropdowns/