Step 3 – Adding the Drop Down Menus
Lets begin by extending the unordered list <ul> tags within our page to include some child lists. These will make up the items in the drop down menu;
Notice that I have encapsulated the child lists wihin another DIV with an associated class of navigationBar_sub. This will make it easier to style the dropdown lists seperately from its parent.
So lets add the following styles for the drop down menus to our style sheet
Using the same approach as in Step 1, I created an image which was 1 pixel wide, black and semi-transparent. This is set as the background image (see above) for any <ul> tags found within a DIV associated to the class navigationBar_sub.
Also notice that I have set the display property to Block. This is only temporary as we only want to display the menu when the user hovers over the menu item and by setting the property to block the child menu will always be displayed. This is handy though as we can check the styles are correct and you should end up with something like: