CSS dropdown issues

[znebojsa]

Hi, you can see the site here: Link

My issues are:

1. IE, Opera: dropdowns sometimes get stuck

2. IE7 also needs the suckerfish to operate properly? I thought li:hover was fixed on IE7?

Thanks

[znebojsa]

oh and, I was using http://www.htmldog.com/articles/suckerfish/dropdowns/ as a guide

[Blake Tallos]

It seems to me ur links arent even working for some reason?

[znebojsa]

yeah, that's because all the other pages haven't been made yet, that's not important.

[Blake Tallos]

I just checked in ie7 and the only dropdown menu that is working is your location and your products menu.I dont think “-1″ is supported in ie7. http://jehiah.cz/archive/tabindex

[znebojsa]

yeh, they are the only ones which have dropdowns...

anyway, do the dropdowns sometimes get stuck for you? if you play around with them?

[Blake Tallos]

No, they dropdown the way they are supposed to.

[Rayzur]

If it's based on Suckerfish, then a fix is required for IE7: http://www.builtfromsource.com/2006/...downs-in-ie-7/

[znebojsa]

hmm, thanks Rayzur, but using that fix makes the dropdowns push the content down when I hover over my menu...

[Rayzur]

Hi Z,

You would be surprised how many threads there are on this issue.

Here is a thread search for "Dropdown Suckerfish Problem"

Here is a thread similar to yours from the search above.

And this is an article from css-class.com called "Sticky Sons of Suckerfish", it goes through all the different variations of the bug.

Maybe those will point you in the right direction, sorry that I can't diagnose the exact problem you are having right now.

[znebojsa]

hey, I managed to fix IE by giving it haslayout, using display: inline-block;

However Opera9.5 (not 9.2) still has a similar problem which occurs when I zoom in to 200%...

[Blake Tallos]

Were happy that you got your dropdown menu fixed. Good job Rayzur

[Rayzur]

One of the most common solutions to the sticking problem is to add

li:hover{visibility:visible}

Paul comments on that in the thread I said was similar to yours

Add it into your nav.css here, After doing that your Opera problem was fixed for me

 ul#nav {
    list-style: none;
    float: right;
    margin-top: 40px;
}

ul#nav li {
    float: left;
    width: 81px;
    text-align: center;
    position: relative;
     z-index:999; /*-- add this --*/
}

li:hover{visibility:visible} /*-- add this --*/

ul#nav li a {
    width: 51px;
    display: block;
    font-weight: bold;
    padding: 0 15px 51px 15px;
    background: no-repeat 0% 100%;
    color: #666666;
    text-decoration: none;
    cursor: pointer;
}

[znebojsa]

Hi Rayzur:

I have now updated the site with what I currently have it as.

Anyway, li:hover{visibility:visible} made Opera better, but still not perfect, on the home page it still isn't perfect, but on other page its fine... Can you spot any reason why?

Also, adding z-index:999; didn't do anything though, so I've removed it.

Thank you, all your responses have been greatly appreciated

[Rayzur]

Hi Z,

I'm afraid this Opera zoom problem is getting out of my league. I know Opera does not redraw the page anytime the viewport is resized thus a reload is required for it to redraw the page. I'm not sure if that has anything to do with this though, I tried reloading the page after I zoomed and it had no effect.

What I am noticing is that the (products) submenu's width is not zooming in proportion like it should.

I'm sure Paul O'B will pass through here shortly and pin point the problem if it is possible to fix in Opera.

[Paul O'B]

H,

Try giving the nav a width as Opera is more stable when widths are applied to floats.

e.g.

ul#nav{width:410px}

[znebojsa]

Hi Paul,

wow, I just woke up and decided to check if you had replied, and you had the exact same minute I checked, perfect timing =D

Anyway, making the width 405px, fixes the problem as you said. I actually don't even need to use li:hover { visibility: visible }

Thank you very much, dropdown menus are a real nuisance

[znebojsa]

actually, looks like I have to make the ul#nav at least 409px for IE6... otherwise the last link drops down to the next line... no idea why as 81 x 5 = 405.

Oh well..

[Paul O'B]

otherwise the last link drops down to the next line..

Yes I noticed that which is why I made it wider Of course you could give IE the auto width if you wanted and didn't mind an extra hack etc.