/    Sign up×
Community /Pin to ProfileBookmark

rollovers

Copy linkTweet thisAlerts:
May 21.2007

I have implemented a list apart’s tutorial on using rollover menus with css and some javascript. I’ve noticed that on some browsers, IE7 for example, on the below website, that if you rollover the menu item “Product Search” at the top, and you get the dropdown menu, if you try to select the second item in that dropdown (and sometimes even the first), the dropdown menu goes away. Anyone have any idea why?

[URL=”http://www.goldenglovepromotions.com/test/”]http://www.goldenglovepromotions.com/test/[/URL]

Thanks,

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@sticks464May 21.2007 — The first thing that comes to mind is [B]width: 90px;[/B] is not wide enough causin the word Search to wrap below Product. You might try a separate class for this <li> or an inline style making it wider. Or you could just change it to "Search".

In IE6 it makes the menu area about 50 px high for bothe words to display in the grey area and in FF2 it hangs over the head tag. But in both browsers it work correctly.
Copy linkTweet thisAlerts:
@jrthor2authorMay 22.2007 — I don't see the word Search wrapping in either browser. I changed the width to 100px.
Copy linkTweet thisAlerts:
@sticks464May 22.2007 — I just checked it in all browsers except IE7 and it seems ok.
Copy linkTweet thisAlerts:
@jrthor2authorMay 22.2007 — It still doesn't seem to work right in IE7, you rollover "Product Search" and the options show up, but you try to select one, and the menu goes away.
Copy linkTweet thisAlerts:
@jrthor2authorMay 24.2007 — Can anyone please help me with this? I have users that are complaining that this doesn't work for them. It only seems to be an issue with IE7.

Thanks!!
Copy linkTweet thisAlerts:
@CentauriMay 24.2007 — This fix was listed on Dynamic Drive where this menu came from - you probably could have found it yourself if you had gone back to the source....
[CODE]#toolbar ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
[COLOR="Red"]background-color: #F3F3F3;[/COLOR]
}[/CODE]

I haven't tested it myself as I would have to set up test files to do so - try it and see if it does the trick.
×

Success!

Help @jrthor2 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...