CSS Formatting for Mulitple Drop Down Menu and Relative Position Divs

This post will be of great interest to web designers that use Dreamweaver. The reason for saying this is that in the past I have discussed how tricky it can be to create a drop down menu system for multiple pages that is both search engine friendly, fast to react and works flawlessly.

Something that, for many websites, is going to be an essential requirement, as they grow from a humble beginning into a significant Internet presence with many multiples of pages.

So apart from the content, what are the primary design features that a website needs to allow new pages to be added easily and at will: visit

• Using templates to update multiple pages in a few keystrokes
• Adopting a CSS and list based drop down menu that can have new categories added very quickly and easily
• Using navigation that can be spidered instantly by search engines, as opposed to Flash or Java based options
• Using a layout format that can grow with the content i.e. using ‘relative div positioning’ as opposed to ‘absolute div positioning’

By combining all these features, you should be able to see that pages, based on a simple template, can be created where the footer and contents sections adapt and re-position themselves automatically to accommodate the content being added.  This makes the whole process of creating new pages and publishing them much simpler and quicker.

So first things first, how to create a fast loading, search engine friendly, multiple page dropdown menu. Probably the best tutorial I have seen on the subject.

There are one or two problems associated with this tutorial, the first is that when you place a div below the menu, it sits in front of the drop down portion obscuring the view. My solution to this was as follows:

• Hi, I added a Z-Index value of 1 to the ‘#navMenu ul ul’ div and viewed it in IE7, seemed to work fine for me. I also checked Google Chrome and Mozilla, they were all OK after I did this. None worked before I added the Z-Index. I updated it in the CSS Rule Definition box under positioning. But there is actually a better solution, just add a Z-Index of 9999 to the #navMenu ul li:hover ul. This always ensures it is the very top layer and was found on this page CSS Drop Down Menu Tutorial
• Someone else also made this comment which fixed the problem for him – “OK fixed: had to add DOCTYPE? in the head in to the html file which I didn’t do at first as I was practicing these menus.”

The other problem was that he didn’t create any CSS code for the wrapper, but if you visit this tutorial on using div positioning, you should be able to work things out for yourself. This tutorial also covers how you configure your divs for automatic re-positioning as content is added.

OK that takes care of the formatting side of things, now for quick updates using templates. This part is for web designers that use Dreamweaver because it discusses creating and using Dreamweaver templates. Again it was the best tutorial I could find on the subject.

The main thing to remember when using templates is that the portions of the page you want to edit should be turned into ‘editable regions’. Then when you want a new page you just go to the file menu and click on new. You will then be able to select the template you want and create your new page, then add content or update the ‘editable sections’.

All in all pretty much everything you need to create a website that can be developed and added to very quickly. So a big thanks to the guys that created the tutorials.

The next aspect to look at is how to make that horizontal menu vertical so that it is even more flexible. One for the future, I think.