Navigation Menu using CSS and JQuery – Step 3

26 Jul

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;

Child Lists for the Drop Down menus

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

Styles for the Drop Down Menus

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:

Navigation Bar showing child menus


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: