Ajax Loader
×

Soothing CSS3 Dropdown Animation

Animated dropdown menu by Alex Penny. I have improved the code a lot from the original version for the better and more cross browser compatibility.

Related:

10
X
×

Coding Preferences


HTML

CSS

Javascript

More

13 Comments

× New

Sign In to comment

anniecanyon:

The text colour on the dropdown menu was going white white after you add your links, and the font was bold.

I fixed this by altering the code like so (after adding in the code from endonix - thanks! :
}
.dropOut a{
line-height: 0px;
padding: 0 0px;
font: 13px Verdana, Lucicda Grande;

}

ul li:hover a { color: white; }
ul li:hover .dropdownContain { top: 65px; }
ul li:hover .underline { border-bottom-color: #777; }
ul li:hover .dropOut { opacity: 1; margin-top: 8px; }
ul li:hover .dropOut { color: #777777; }
ul li:hover .dropOut a{ color: #777777; }

Now I just need to work out how to make it responsive... Anyone any code?

pradzr:

Hi,

could I use this on a commercial project :)

-obviously without distributing it:)

cheshiredave:

Works great so far -- nice work! One thing to note is that the .dropdownContain top should be something more like -1000 -- otherwise you see a flash of the disappearing menu depending on how far down the menu is.

morz:

Did anyone figure out how to assign a link in the drop down without the style links from the above bar whacking out the line height and increasing it to a box yet?

Doolgo:

SOMEONE please help me!!!

can someone give me the corrected code, mine wont let me have a fieldset, its missing the border line.

HELP!
Christian - [email protected]

endonix:

It seems like (not sure if its just for me) that the dropdown links are taking the style of the links in the main bar.

.dropOut a{ line-height: 0px;
padding: 0 0px;}

This will prevent the links in the dropdown from grabbing the line-height and the padding from the ul li a class.

I think

endonix:

I'm having trouble, as soon as i make a link out of one of the items in the dropdown list things go dodgy in firefox and chrome. Safari keeps them tidy most of the time.
What am i doing wrong here?

<a href="#"><li>Plan</li></a> (works for safari, not for chrome (white space above the menu item) nor for firefox (whitespace below the item)

This is with just your code and the link added to the plan item.

Obletix:

Probably a stupid question, but how do I make the same drop down appear beneath "Help" for instance?

I tried copying the "dropdownContain" div into the "Help" href. But this makes it drop down beneath "You" when i hover over "Help" hehe.

What would be the smartest solution for this?

Thanks!

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+