Grow your CSS skills. Land your dream job.

HTML5 & CSS3 Dropdown Menu w E-mail Form

  • # March 13, 2013 at 6:57 pm

    I’m working on a **Horizontal (left to right) CSS3 dropdown menu**. I want to request their e-mail and make it quick and painless. I have constructed the ul and li fine and it is reading right to left, I am having trouble with making it visible and then invisible. I’ve tried a couple of ways and am it is just not working. I tried the _transition: height 2s;_ and well it is not working.

    I have viewed numerous demos on dropdown menus and have had several successes just I decided to create something a little different and well. Help ! I’ve stripped out the coding numerous times, frustrated.

    I guess adding a form to a menu list is more complex than I thought to the pulldown area.

    Here is the code pen page and what I was looking at below http://cdpn.io/wAyam

    **MOD EDIT** Code snipped as Codepen exists.


    Thank you in advanced for your suggestions. I could use them.

    # March 14, 2013 at 5:40 am

    You don’t find ‘display:inline-table’ being used very often! :)

    Here’s a functioning dropdown menu that you might be able to fork and play with.

    http://codepen.io/anon/pen/gzCmu

    # March 14, 2013 at 6:28 am

    Oh heck….I had some time. –>

    http://codepen.io/anon/pen/sxjuy

    # March 14, 2013 at 4:16 pm

    Thank you so much for going the**_extra mile_ ** very sweet of you to do so Paulie_D.

    I think a video doing this type of thing of more than just adding a link to a web page could be helpful for many of us learning when to use specific CSS3 properties. It gets very awkward on those.

    Embarrassed, I guess I lack experience at the moment, but the more I work on these things the more things make sense.

    Wild Hare Jesse

    # March 15, 2013 at 6:03 am

    Wish I had the time.

    I am trying to build up a small set of basic examples with comments on what each property does (and why it’s necessary) purely for my own benefit.

    Codepen is excellent for that.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".