Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 233
  • Last Modified:

Strange jquery effect

Site: http://triadtestsite.com/triadinc/header.php

I am just learning jquery and I want to create a box that drops down and stays down when a user hovers over the top area of my site. It's kind of working, but right no it looks a little jumpy. I just want the bottom of the blue box to pull down into the final position, without the jump back to the top. Does anyone know what I'm doing wrong here?

1 Solution
The problem you are having is that during slideUp() and slideDown() the blue-dropdown div is clearing the floated elements in the header.  Overflow-y is set during the animations which I believe is the root of the problem.

There are different approaches to work around this, but I thought this might be the simplest:

1) Always clear the blue-background div below the floated elements
2) Add a negative value to the `top` property to move the blue-background into the proper position

.blue-dropdown {
    background-image: url(../images/blue-dropdown.png);
    height: 150px;
    width: 820px;
    z-index: -50;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: none;

    clear: both;
    top: -78px;

Open in new window

elliottbenzleAuthor Commented:
That worked great. Thanks so much!

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now