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.
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
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.
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?
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.
You are the man!!!! Thanks!
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.
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!
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.
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.
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.
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
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.
I’ll give that a try this weekend John. Thank you for your kind desire to help. Will let you know what happens. Tom
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!
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.
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!
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)
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.
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.
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!
Is there a way to make the drop down menus center in the web page left to right?
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!
@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.
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.
The problem with pseudo classes only affects Internet Explorer 6 and earlier builds. It has no effect on Internet Explorer 7 and later builds.
nice but in IE it’s not working
It works in IE7 and IE8 but not IE6. If it’s not working in IE8 you are running a beta version.