Let’s see if I can make this tutorial simply and easy. The tutorials out there are lengthy and cluttered with non-essential elements to make the example visually pleasing. I wanted to make mine BARE MINIMUM so that I can see what CSS property are actually make the structure.
Key elements for HTML code:
- Top level menu’s UL tag – “top” class assigned
- Second level menu’s UL tags -“sub” class assigned
Key Elements for CSS:
- margin and padding reset – Browsers applies 16px to top- and bottom- margin, and 40px to left-padding. Let just get rid of those so you are not confused.
- list-style – make the bullet go away. It just looks too broken when they are there (this is NOT a contrubuting CSS property to make the horizontal nav structure)
- inline-block on ul.top > li – This HAs to be “inline-block”. Can’t be inline, can’t be block. Well, technicially it will work okay with just “inline” under Chrome browser, but messes them up with IE and FireFox.
- relative on ul.top > li – again this HAS to be “relative”. Making this element “relative” forces the “absolute” position of the submenu origin point to be this element .
- absolute on ul.sub – making it “absolute” will not interfere the flow of ul.top > li.
So this will get you started on building a horizontal navigation with drop down menu. Of course, this is just a starting point. You will need to decorate them, size them, position them, and add some behaviors to make it fully functional. But now you know which properties are being used to make the navigation structure.