Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Need help with CSS 3 dropdown menu

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #167270
    dyetube
    Participant

    I’m building a pure css3 drop down menu and for the dropdown I’ve made it look like a talk bubble meaning I’ve I’ve put a pseudo before element above the dropdown that is a triangle and used rounded corners on the dropdown. The problem I have is that there is space between the actual rounded corner element and the menu bar because of the triangle. Sooooo, when you hover off the menu bar, the dropdown goes away. I need for the dropdown to stay open when the cursor is moved down so you can select links.

    I thought I’d put a pseudo element on the first link in the dropdown and move it up so it covers the space left by the triangle and gives your cursor something to be on but that doesn’t seem to be working. Here’s my code:

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

    Any suggestions??

    #167271
    nixnerd
    Participant

    Please put this on Codepen so we can tinker with it. Also, you probably know this but I’ll say it anyway… you’ll be restricted to hover activation unless you incorporate some jQuery. You’ll never be able to toggle it on and off.

    #167274
    dyetube
    Participant

    Not sure what you mean by toggle on and off? I might eb ok with using some light jquery although, I really want this to be pure css if possible…

    #167285
    Paulie_D
    Member

    Best I can do at short notice: http://codepen.io/Paulie-D/pen/AhJau/

    #167305
    Atelierbram
    Participant

    Interesting problem, could be solved, my attempt is not quite there yet, but run out of time, so this has got to do for now.

    #167307
    dyetube
    Participant

    yes, that’s what I’m looking for but trying decypher what you did because when I hover over the link with the drop down menu the main menu shifts. And there’s uneven padding on the sides I can’t seem to get rid of. Mine formats perfectly except the not being able to hover to the drop down properly…

    #167308
    dyetube
    Participant

    This is actually a great starting point. I’m going to work with the styling and this should work. I post a reply if I get it working with all styling right. Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.