/    Sign up×
Community /Pin to ProfileBookmark

Display issue with flyout menu

I’m building a flyout menu into a webpage, and it works great, but there is a small display issue. Basically, rolling over an image will show the submenu to the right. This is done by adding in the main image and then creating a new table that contains the submenu items and simply using a class in CSS to hide the menu until the image is rolled over, then the menu is made visible. The problem is that between the main image that shows/hides the submenu and the next main menu image (which should be directly below it) there is empty space where the submenu table was created in the code. Since Ive repositioned this with CSS, this empty space is glaring and the next image down doesnt display directly underneath like I would like it to.

Ive attached my files (keep the file structure within the ZIP file), take a look and youll see what I mean.

Other than that the menu works great. I converted the menu code from a tutorial site that used a horizontal menu at the top instead, so there was no concern for this issue I’m having. Is there a workaround for this, or have I completely approached this in the wrong way?

-Jeff

[upl-file uuid=d712beb1-4c68-47a8-8fcc-128559517dc3 size=42kB]files.zip[/upl-file]

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @Jeff_S 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...