Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    79
    Thanks
    45
    Thanked 0 Times in 0 Posts

    Can someone please make me one..

    Could someone please me me a really simple dropdown menu and explain the code?

    I've been trying to learn it for long time now but cant understand.
    I know the html structure but kind of confused with css

  • #2
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    Where are you having difficulty? Before you do a dropdown menu, can you create a horizontal menu and do you understand how this horizontal menu works?
    My signature :)

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    79
    Thanks
    45
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ttkim View Post
    Where are you having difficulty? Before you do a dropdown menu, can you create a horizontal menu and do you understand how this horizontal menu works?
    http://jsfiddle.net/h123er2/z3yfx/

    this

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,480
    Thanks
    6
    Thanked 981 Times in 954 Posts
    You have the markup right and the right approach. You’re just one step from the final goal.

    You need to position the sub menu absolutely instead of just hiding it (and the main list items relatively for that matter).
    Code:
    ul li {
      …
      position: relative;
    }
    ul ul {
      …
      position: absolute;
      top: 100%;
      left: -9999px; /* hide outside the viewport by default */
    }
    ul li:hover ul {left: 0; /* move into view, aligning them to the left of the parent list item */}


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •