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
    Feb 2013
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Converting Existing Menu To Drop Down

    Ho, im trying to convert my existing menu to a drop down menu. Where the submenus are centered in the middle. Like this. http://designdisease.com/how-to-crea...rop-down-menu/ Demo:http://designdisease.com/demos/css-d...wn/source.html

    Heres what i have so far.

    http://jsfiddle.net/HwRee/2/
    Not sure where to go from here, because the subheading are not showing when i hover over the parent.

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    You closed the <li> of the parent item too soon. The child menu should be embedded in <li> and </li>. See http://jsfiddle.net/HwRee/3/, in which this has been corrected. But you have more problems, and your code isn't exactly optimal. Have a look here: How to Make a Drop-down/Fly-out Menu with CSS.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • Users who have thanked Frankie for this post:

    KKHAN (05-22-2013)

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ty, i managed to fix it using the website you gave aswell. That website is very clear in teaching. I will most likely use it for other things!

    I have one problem, what if the child element is bigger than the parent? How would you fix this? By changing the width of the parent specifically?

    Also you see how the text: http://jsfiddle.net/HwRee/4/ is not properly aligned in the middle.

    Edit: nvm its sorted.
    Last edited by KKHAN; 05-22-2013 at 04:04 PM.

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    330
    Thanks
    3
    Thanked 35 Times in 35 Posts
    Quote Originally Posted by KKHAN View Post
    That website is very clear in teaching. I will most likely use it for other things!
    Thank you!
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Posting Permissions

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