A cross browser drop line cascading validating menu
So we will position the second level navigation a little above the first level (as shown in the picture before), and the third level little above the second level (it looks just cool to me :). If we use margins to move apart the elements, we won’t see the problem until we would like to remove the elements in the second and every next level of navigation.
We don’t want to show the second level navigation until the mouse goes over the navigation element that has the submenu (Projects). If we use to remove these elements, the elements will disappear because we would have a gap between them.
You can see a comprehensive list of CSS tools to Tutorials in this post. Source A powerful Photoshop-like CSS gradient editor from Color Zilla.
Source In graphics software I pick colors in HSB (Hue, Saturation, Brightness) because it feels more natural to work with than RGB or CMYK.
Now, with CSS3 we can use HSL which is actually quite different than HSB.
Without a decent HSL color picker, it’s difficult to understand.
CSS is simple but very powerfull language, it’s very easy to learn, but once you learn it you might amazed of its ability. Today we have collected a serious set of CSS resources to help you learn.
The above is an index of all my navigation menus which range from the very simple to the more advanced.
These menus all work in the latest versions of the most popular browsers but cannot be guaranteed to work in older browser version or some of the lesser known browsers.
The main problems of creating drop down menus lies in the Internet Explorer’s inappropriate way of displaying :hover pseudo class (not recognized anywhere except in A tag), and the problem in calculating the z-index when an element is positioned absolutely inside a relatively positioned element. We will create a horizontal menu with a submenu on “Projects” and two submenus (Older projects and Active projects). Now, we are going to position the second level navigation lists.
To better understand this article, you could read the Suckerfish dropdown article on A List Apart. As we said, we will position them absolutely inside their list items.