Pure CSS Drop-Down Menu tutorial – a slight omission

I just got a comment from a reader of my recent Expression Newsletter article The No-Code Way to a Pure CSS Horizontal Drop-Down Menu with Expression Web. He was having trouble getting the grey boxes to “fill out” properly which left the menu looking weird.

A quick review of his CSS told me the problem was he didn’t have the display property set to block. A slight omission for sure but I was more focused on where it originated. A quick read of the paragraph in the article showed me that somewhere in the editing (probably during my rigorous clean-up) this small but important piece of code was ommitted. Which means if people follow the tutorial step by step they’ll run into the same problem.

I’ve already informed the newsletter team of the issue and hopefully they’ll fix it presently. In the meantime, if you’ve run into this problem and you found your way to this blog, here is the full paragraph and the resulting code:

5th paragraph under the heading “Style the links”:

To set the height of the link go to the Block category and set the line-height attribute to 30px to match the height of the ul li style you defined earlier. The reason you are using the line-height attribute instead of the height attribute is that line-height automatically places the text at vertical center. If you were to use height you would have to set the vertical placement manually using padding. To set the width, go to the Position category and set width to 150px to match. Finally, to “fill out” the area with the background colour, go to the Layout category and set display to block.

The resulting code should look like this:

ul li a {
	background-color: #808080;
	color: #FFFFFF;
	width: 142px;
	display: block;
	text-decoration: none;
	line-height: 30px;
	padding-left: 8px;
}

You can find a full working version of the menu here and it’s CSS here for reference.

39 thoughts on “Pure CSS Drop-Down Menu tutorial – a slight omission

  1. This is great.

    One question. Is there a way to make sure that the menu is on top of everything else on my page.

    What I get now is that one the menu drops, the child items sorta blend in with the other text and images on the page. Is there a way to make sure that the menu items are on top of everyhitng all the time?

    Thanks,
    Asif

  2. Hi, Is there a way to make the last items on a horizontal CSS menu pop out to the left so that it’s right edge aligns to the right edge of the parent in the menu? The rest would still align left edge to the parent. The would help higher resolutions see the menu instead of it going off the screen. The menu is CSS, but is displayed on each page with javascript.

  3. IE 8.0 Beta — When previewing the menu in IE8 (either your version or mine), you have to hover over every item in the list in order to make them appear. I want the list to appear without having to do that. Is this true of just IE8? What is going wrong?

    1. I’ve done some research and it looks like IE8 has problems interpreting the :hover pseudo class in nested elements. It is unclear whether this is a bug or if it is intended. I’ll have to dig a little deeper to find out which one it is. In the meantime there is a way around it – you can tell IE8 to interpret the site in “compatibility mode” from the head of the page. I’ll post a tutorial on this in the coming weeks. Do a Google search for “li:hover ie8” for more information.

  4. Hi Morten. Me again. I have the same question as Asif. I played with the z-index to no avail. My drop downs appear behind my images. I am trying to build a .dwt. HELP! Thanks. 🙂

  5. Hi Morten, I also have the same question as Asif. I put the menu that I created (from you “wonderful” tutorial in my Master.dwt page. When I run it all of the secondary menus fall behind everthing else on the pages the master.dwt is attached to. I just started with Expressions so need simple direction. Thanks!

    1. Asif, Candice and Tom: I am working on a tutorial for how to position the drop-down menu on your site. It’s on my to-do list but there are a couple of items in front of it that have precedence. It will be up shortly.

  6. Thank you for even putting it on your list. I have to say how awesome the step by step instructions were. Like Tom, I am brand new to Expression Web 2. Your instructio9ns are awesome. 🙂

  7. Hello Morten and everyone.

    The drop down menu is excellent. After playing about with it for a while, I found that I was having the same problem as Asif. I managed to fix this up by adding:-

    Position -> Position:Absolute to the UL LI UL LI A CSS style.

    This makes the drop down menu fill in ‘solidly’ and not merge with the text underneath.

    Hope this helps.

    John Walker.

  8. I just tried what John said but it didn’t work for me. But then being new to all of this, I don’t know where to place the code in my “master.dwt” page. Also, no matter where I place it, it affects all the other “UL, LI, etc” commands in the rest of the page that the master.dwt is attached. I am hoping for some direction so I could have published my web page with this nice drop-down menu but will have to go back and find another way. Any help before I do this?

    Thanks

  9. Hello Tom,

    Sorry you are having problems.

    Below is the part of the css file that is linked into the DWT file that I use.

    #navbar ul li ul li a {
    background-color: #666666;
    position: absolute;
    }

    In my template, I have put the menu in its own called navebar and by using the # sign, the CSS style is only applied to the contents of that particular .

    To get the stuff that Morten has told us about working in this sort of format, the only thing you need to do when creating all the CSS styles is to preceed the names with the div id, in my case #navbar.

    The extract from the CSS file above was the only change that I had to add to the styles in order to get the menu looking solid.

    Please let me know how you go and I’ll try to help further. It really is worth getting to the bottom of your problem as the menu does do a a really good job.

    Cheers,

    John.

  10. I’ll give that a try this weekend John. Thank you for your kind desire to help. Will let you know what happens. Tom

  11. Another little tidbit. You do not have to do any html editing to make the child menus, you can edit them like an outline in Word. In design view, click after the menu item you wish to add children to, hit enter, then tab and you got your child menu!

  12. I am having the problem like Asif too. When the page opens with the menu bar the drop down items in the master.dwt are behind the contents on the pages. How do you solve this? Tried the Absolute thing and that didn’t work.

  13. I cannot get the menu to work in the DWT file. I either see all the menu items, including the submenu items open or I see it in Outline form. When I view the menu.html file in a browswer, it looks fine, but when I put it in the DWT, it doesn’t look like the menu.html file I created. I am new to Expression Web and Web Design. Does it work with premade templates? I have tried the suggestion from John to no avail. Can someone be of assistance? Thank you!

  14. Thank a lot,
    1-but can you tel me how i can put the back ground for Each menu? ( I thing it becomes nicer with a beautiful background)

  15. Thanks for your great article on creating a drop down menu in Expression Web. I created the “menu.html” file and it looks and works perfect, but I am stuck.

    How do I get the “menu.html” navigation buttons to show up on my home page? I don’t get it?

    Thanks.

  16. Can anyone answer this?

    Thanks for your great article on creating a drop down menu in Expression Web. I created the “menu.html” file and it looks and works perfect, but I am stuck.

    How do I get the “menu.html” navigation buttons to show up on my home page? I don’t get it?

    Thanks.

  17. Howdy,

    I am having the same problem! The menu shows great on a preview, but I am not sure how to get it onto the shared border of my site. HELP!

  18. So, looks like some of these posts are months old and no response to date. Is this something that cant be answered? Is there a better resource that you can suggest so we can get the help we are looking for? Please respond!

  19. @R-A Mazzola and others: The reason I haven’t posted the promised tutorial on how to make the drop-down appear on top of other content is that I am in the middle of revising my book which is to be released shortly. On top of that I also have a bunch of client projects that are taking up pretty much all my time.

    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.

  20. The CSS sample displays perfectly for me in IE8. Not sure what the reference above to problems with pseudo class in IE8 is all about. I am probably going to implement this method for some clients with old sites that use javascript drop downs (written by others) which are no longer working in IE8.

    Thanks.

  21. Hi,

    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.

    1. @John: To your question first: To position the menu so that it hovers above the content and doesn’t move it, place it in a div with absolute positioning. The absolute positioning will “lock” the menu to a specific location on the page and float it above the content rather than place it within it.

      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.

  22. Hi Morten – thanks for getting back.

    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.

  23. Hello Morten,

    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

  24. Hi Morten and All,

    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)!

  25. I have EW4 and I had a CSS drop down menu already done on EW3 that worled just fine. When I try to create new menu in EW4, I follow the instruction to the letter but in the first step, in entering the first tag after hitting “enter” – I do not get an indent, and I do not get a new line on design view. Even if I manually indent, design view does not create an indent or any opportunity for a new menu. I will attach the code here:

    Menu

    Class Yearbook
    Contact Us

    Biographies
    Pictures
    Video

  26. hey,
    i have a question. How do I center the entire menu? I tried some stuff but only the text gets centered but not the entire menu tray. Thanks

  27. Hello just wanted to give you a brief heads up and let you know a few of
    the pictures aren’t loading correctly. I’m not sure why
    but I think its a linking issue. I’ve tried it in two different browsers and both show
    the same results.

Comments are closed.