McMaster University

Faculty of Health Sciences
Web Design

Scope of Search

How to Create Top Menu

In order to update the top navigation bar, first remember that the McMaster home page link on the far left of the menu must remain. Also, the link to the McMaster A-Z Index in the drop down must remain. The top nav bar is simply an unordered list with other unordered lists nested within it for the drop downs. There can be up to 3 levels such as is used for the global McMaster top navigation bar. The drop downs are controlled by CSS.  In order for the CSS to work correctly in Internet Explorer 6 (IE6) and Internet Explorer 7 (IE7) at the same time, a hack is required in the code. The hack is a pattern of conditional comments before and after the ending anchor tag for each list item that has a nested unordered list for the drop down. The pattern must be followed exactly. For example, the Academics link has a drop down that has 4 links as follows:


FHS Fast Facts page image

When rendered in IE7, the closing anchor tag follows immediately after the text for the upper level link.  

When rendered in IE6, a table row is added immediately after the text for the upper level link. The table row is closed and then the anchor tag is closed immediatedly after the nested unordered list. This is required since IE6 does not recognize relative positioning in the CSS.

As a model, please view the Library file for top navigation bar as it is set up for the McMaster global navigation, right click and view source: