Hover submenus not working with FF or Opera

Meri wrote:

Quote: Originally Posted by Everybody on the internet

Tell them hello for me.

Quote: Originally Posted by seems to think this is a problem with IE but for me it works fine with IE, but the submenus do not appear with Firefox andOpera. > The html is a simple list with sublists. > The CSS looks like this:

Oh, a URL to a simplified test case is always so much better.

Quote: Originally Posted by > #menu ul { list-style: none; margin: 0; padding: 0; display: block; font: bold 14pt/14pt "Times New Roman";

You should probably get rid of the /14pt here, since you presumably want
a standard line-height. Second-best is to replace the pt-units-based
value with a value without units, such as 1.2 or 1.3.
See <http://www.w3.org/TR/CSS21/visudet.html#propdef-line-heightfor
usage of "number" values, plus search the Web/Usenet for further
discussions on why and when to use such values.

Also, 14pt is a specification best used for printing. Better is a
percentage, like 100%. See <http://tekrider.net/html/fontsize.php>.

Furthermore, what happens to the visitors who don't have Times New
Roman? Do you want them to see their default serif font? Or just their
default, which might be sans-serif, like Arial or Helvetica? Consider
adding a generic family, such as
font: bold 100% "Times New Roman",serif;

Quote: Originally Posted by line-height: 30px;

What?!? Why did you have the /14pt then?

And what happens when the visitor upsizes the text? Yes, the txt grows
out out of the space you've provided it.

Quote: Originally Posted by width: 200px;

Same here. Try something in em units.

Quote: Originally Posted by } > So we show the main menu. But we don't show the submenus: > #menu ul ul { list-style: none; margin: 0; padding: 0; display: none; font: bold 12pt/12pt "Times New Roman"; line-height: 30px; position: absolute; left: 200px; top: 0px; } > Except when the mouse is over the list item: > #menu li:hover ul { display: block; }

Here's why a URL is better: why could try it ourselves if we had a URL.

Quote: Originally Posted by > This works beautifully with IE (version 7.0.5730.11) but the submenus stay hidden with Firefox (version 2.0.0.14) and Opera (version 9.10).

As it will in IE6 (and under), since :hover isn't supported on elements
other than <ain IE6.

I suspect there is some problem with the code and/or your selectors,
keeping #menu ul ul from being the same as #menu li:hover ul. Otherwise,
I'm wondering about a sub-menu item that appears in an
absolutely-positioned location. Are you sure it's not appearing, but is
just *behind* something else?

Quote: Originally Posted by I have Windows XP Home if it makes a difference. I've tried different combinates of li ul and li:hover :-) I even tried a:hover but then it doesn't work with IE either. > I define colors under #menu a, #menu a:hover etc.

Could be. URL?



--
John
Pondering the value of the UIP: http://improve-usenet.org/

Tell them hello for me.

Thanks for replying, John, and for the tips. You were right about defining
line height twice, for example.

I'll stick to the main problem. I'll have to make a more anonymous version
and find where to post the files temporarily.

Quote: Originally Posted by Quote: Originally Posted by >This works beautifully with IE (version 7.0.5730.11) but the submenus >stay hidden with Firefox (version 2.0.0.14) and Opera (version 9.10). > As it will in IE6 (and under), since :hover isn't supported on elements other than <ain IE6.

....but I won't bother right away since I'll clearly have to find a different
solution all together. What a pain!

I did already try a:hover since each list item also has a link but must've
done something wrong.

All dropdown menu examples I find on the net seem so complicated. I'm sure
it's possible to do it in a simple way.

Quote: Originally Posted by I suspect there is some problem with the code and/or your selectors, keeping #menu ul ul from being the same as #menu li:hover ul.

I tried all kinds of combinations of li, li:hover, ul etc. Will keep trying.

Quote: Originally Posted by Otherwise, I'm wondering about a sub-menu item that appears in an absolutely-positioned location.

Well, relative pushes the next main menu item down below the submenu. It
seems to be fine.

Quote: Originally Posted by Are you sure it's not appearing, but is just *behind* something else?

I thought about that and tried z-index. It didn't make any difference.
Besides, the submenus appear correctly without hovering if I change display:
none to display: block.

So I'll ask again if I can't make a nice dropdown menu with a:hover - to
make it work with different browsers.

Meri wrote:

Quote: Originally Posted by All dropdown menu examples I find on the net seem so complicated. I'm sure it's possible to do it in a simple way.

If this is for a real commercial site -- anything other than a personal
or hobby site -- be sure to hire testers with motor deficiencies or
hand/eye coordination problems. Consider keyboard users as well (and
those with JavaScript disabled).

Personally, I despise multi-level "drop-down" menus. I don't think I
stand alone in this.

--
-bts
-Friends don't let friends drive Windows

Hello to you too

Quote: Originally Posted by If this is for a real commercial site -- anything other than a personal or hobby site -- be sure to hire testers with motor deficiencies or hand/eye coordination problems. Consider keyboard users as well (and those with JavaScript disabled).

It's not for a commercial site but for not personal or hobby either. It's
for an association so yes, it should work with older versions of the
browsers too. I'm sure all the users have IE but I'm testing FF and Opera,
too.

I will add a link to the main menu items so that those users who can't see
the dropdown menu can open a "table of contents" page.

I don't intend to use any JavaScript.

Quote: Originally Posted by Personally, I despise multi-level "drop-down" menus. I don't think I stand alone in this.

There always will be taste issues :-) And I don't like more than two levels
either.

On or about 6/9/2008 9:04 AM, it came to pass that Meri wrote:

Quote: Originally Posted by Hello to you too > Quote: Originally Posted by >If this is for a real commercial site -- anything other than a personal >or hobby site -- be sure to hire testers with motor deficiencies or >hand/eye coordination problems. Consider keyboard users as well (and >those with JavaScript disabled). > It's not for a commercial site but for not personal or hobby either. It's for an association so yes, it should work with older versions of the browsers too. I'm sure all the users have IE but I'm testing FF and Opera, too. > I will add a link to the main menu items so that those users who can't see the dropdown menu can open a "table of contents" page. > I don't intend to use any JavaScript. > Quote: Originally Posted by >Personally, I despise multi-level "drop-down" menus. I don't think I >stand alone in this. > There always will be taste issues :-) And I don't like more than two levels either. > >

In Firefox take a look at Tools-->Error Console-->then scroll to the
end. The issue or issues may be listed. You may need a small bit of
Javascript for IE6 and lower. Search for Son of Suckerfish. I would
definitely add that link on the first level pointing to a "links
page/table of contents page" making it functional when the dropdowns
don't or can't open.

BTW I use a two level menu on my website that works really well and
received similar flak when I asked for help.

Just to let you know, I found the problem. It was a really stupid mistake
from my part in my html list. I had closed the list item, which contained my
submenu, before the submenu when
</limust come after </ulof course! That's what you get when you copy
paste and don't pay attention. And I kept stairing at my css.

IE clearly didn't take anynotice of my mistake (which can be quite
misleading) but FF and Opera protested.

Most importantly, now my dropdown menus work beautifully with the three
browsers and the positioning is as wanted too.

I will include a "table of contents" page for those who can't see the
dropdown menu.

Meri

Meri wrote:

Quote: Originally Posted by Just to let you know, I found the problem. It was a really stupid mistake from my part in my html list. I had closed the list item, which contained my submenu, before the submenu when </limust come after </ulof course!

As expected.

Quote: Originally Posted by That's what you get when you copy paste and don't pay attention.

Yes. Been there, done that. That's why we ask for a URL. (We can either
guess blindly, ignore you, or help find the mistake. Choice #3 can only
be done with a URL.)


--
John
Pondering the value of the UIP: http://improve-usenet.org/

Yes. Been there, done that. That's why we ask for a URL. (We can either

Quote: Originally Posted by guess blindly, ignore you, or help find the mistake. Choice #3 can only be done with a URL.)

If I have any other questions, I'll give you a url, promise.

Thanks!