Pure css dropdown list is broken >.<

HTML & CSS
1

Ok. Here is the website I am working on: Lorem ipsum dolor
Dunno what I did to it, but I had it working. Now it is working 90%.
Basically when you hover over the top menu item, it opens up the drop-down as intended. The problem is that the drop-down that opens up disappears as soon as you move the mouse away from the top menu item. I was loosely following this great guide:
CSS Dropdown Menu - Dreamweaver Tutorial but using newer html5 tags and wanted a slightly different formatted look on mine.
My code seems to still be correct and true to the guide. I dunno what the problem is (was working last night).

Also, the problem only seems to be occurring in Chrome.

Any ideas?
thx in advance.

ps: I know this is a separate issue. But apparently the entire layout is looking fubar on IE8. I am assuming this is just due to lack of the magic JS hack to make the browser read the <nav><article><section><footer> elements properly?

2

Also, the problem only seems to be occurring in Chrome.
Hi,
It looks like Chrome is needing your floated LI to be contained in the UL.

You can’t use overflow:hidden; to contain floats in this case because of your dropdowns. There are a couple of different ways you can do it though.

  1. Set a 30px height or a min-height on the UL
  2. Set display:inline-block on the UL
  3. Or use a pseudo :after block with clear:both; on the UL

In case your going to use that PIE script for IE you should also float the anchors so you don’t trip the staircase bug.

I condensed some your styles a little bit, you don’t have to re-declare all your anchor styles on the pseudo states. Just the styles that actually change.

Also, it’s best to hide your sub ul off-screen with a negative margin rather than using visibility:hidden

One other thing I might mention, I try to avoid setting px line-heights with em font-sizes. You actually did not set a font-size but the browser is setting it in ems. I merged it all together with the shorthand font property on the anchor. If you will just use a top/bottom padding to set your height you can get rid of all those instances of 30px height.

This should get you working in Chrome:


nav {
}
nav ul {
display:inline-block;/*contain floats w/out overflow*/
margin:0;
padding:0;
list-style:none;
}
nav li  {
float:left;
position:relative;
background:#B5D66B;
}
nav li a {
float:left;
width:150px;
padding:.35em 0;
color:#fff;
text-align:center;
font:1em/1.2 'Lobster', Times New Roman, serif;
}
nav li a:hover {
background: #83cc30;
} 
nav li ul {
position:absolute;
top:100%; left:0;
z-index:10;
margin-left:-999em;
}
nav li:hover ul {
margin-left:0;
}
3

Thanks for the pointers and info. Worked like a charm. I must say that the amount you can do with pure CSS is just outstanding now, having only recently started digging in to it.

Next up. CSS transitions that should by nature gracefully degrade, but offer some nice enhancements for those with supported browsers :smiley:

4

Hi,
I had made some edits to the code above after I posted, you might double check it.

I removed that 30px line-height and set .35em top/bottom padding instead.

5

ok. Well played around with that “pie” script and it really wasn’t doing it for me.

It appears that only a very small amount of my CSS is being applied in ie8. Pretty much seems that it is having trouble recognizing the #id’s that I have in place ?

any ideas?

edit:
i Just changed the #layout to .layout and it worked (somewhat). Although I would still rather use ID’s for reasons of semantics.