I used your code and had similar difficulties as before with drop down disappearing behind the other items. This was on one of the EW3 templates (SP2 installed). I had difficulty inserting the div inside the header but then came across the Layer management on the master.dwt, saw all the submenu layers on the right and just changed the z index on all to “1″ and it appears to work on IE8 perfectly. (PS website not up yet)!

I use your menu and I am satisfied with it. There is only thing that I cannot fix. Or even uderstand. I have created a DWT file for my website. So eery page should ontain the same menu. It works except for the *.php files. It seems that the menu doesn’t pass the ph interpreter. At my website therefore the contact form looks different from the others. Any idea?
Kind regards,
Richard Bisschops
Uden The Netherlands

After I posted, I put together more details for you – I want to get the CSS drop down to work (you mention good reasons why IE6 concerns are a red herring).

I just tried the absolute you suggested and the menu disappears all together.

More details below…may help resolve this.

To follow on from my post above – I thought a bit more detail may help… (Hopefully the links I have added below will work for you).

As a starting point I used an Expression Web template (Small business 3). I then built into the navigation the code from your example. I was hoping the drop down menu would appear and all would be well.

While the drop down appears the navigation holder now extends permanently in length (height) to accommodate the drop down menu (large grey area below the menu). Hover over ‘Services’ and you will see the drop down extend into this area.

In an attempt to correct this I made the navigation height to 40px (Position – height – 40). This reduced the height of the navigation . But the drop down menu contents appeared to fall behind the text underneath. To counter this, I went to style ‘#navigation ul li ul’ and changed Position – position to ‘absolute’, and z-index to ‘1’. This then displayed the drop down on top of the text (great), but horizontally (not great)– i.e. not drop down. (Note: these changes are now removed).

Page example
http://www.preferredpartners.ie/services_hotel/services_hotel.htm

CSS styles code is here
http://www.preferredpartners.ie/view_styles.html

Layout CSS code is here
http://www.preferredpartners.ie/view_layout.html

Code at the start of the HTML page is found here – shows navigation and contents
http://www.preferredpartners.ie/service_page_header_code.html

Hope the above is understandable and you can help.

John.

ps connection timed out – sorry if there’s a double posting.

To the rubbish (because that’s what it is) posted in the expression forum that you mentioned all I can say is it’s posted by people who for one reason or another insist that Internet Explorer 6 should be accommodated no matter what the consequences. My stance on this is that if you’re not part of the solution you’re part of the problem, and I’m not willing to destroy otherwise perfectly good code to accommodate a browser that not only is severely outdated but is also harmful to use for visitors. And I’m not the only one of this sentiment: YouTube is discontinuing their support for IE6 as we speak and most European online newspapers have placed huge warnings on their sites that appear when people use IE6.

Used the example here to build CSS drop down menus (new to this). Attempted to combine the code with an Expression Web template (small business 3). Encountered the same problem mentioned here previously – when menu drops down it’s hidden behind the text below. I managed to fix this…but…the navigation automatically increased in height…moving the the rest of the page down. Like I said, new to CSS.

Just to let you know…

A Microsoft expression forum – suggest (as early as Oct 2009) scrap the code you suggested….

http://social.expression.microsoft.com/Forums/en-US/web/thread/00a79611-4025-4931-8f58-d8b711006749/

If you have a suggestion to help me work around the template for your drop down menus (good work) – would like to hear – thanks.

John.

Thanks.

Getting the menu to appear on top of other content is not particularly hard, you just have to know how to. Basically you create a div for the header and place the menu div inside this one. Then you set the menu div to absolute positioning and set the bottom to 0 so it locks against the bottom of the header div. That’s really all there is to it.

There is a full explanation of exactly how this is done in my book Sams Teach Yourself Microsoft Expression Web 2 in 24 Hours which is available from Amazon.com and in your local book store. There is a better tutorial in the new book for Expression Web 3 which will be out August/September-ish. Once the rewrite is complete and I’ve gotten some of the more pressing projects off my back I’ll finish the positioning tutorial and post it.