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

    HTML and CSS Drop Down Navigation Bar

    Hi

    Could you please help me with my Drop Down Navigation Bar.

    http://jsfiddle.net/HE5k6/2/

    If you hover over "project" it lists sub items with some more sub items. However, it is not displaying in a block, project 1 and 2 should not be inline. Also i'm trying to make it so that when they hover over Projects the background stays white when they are on the sub items.

    Thanks

    KHAN

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello KKHAN,
    You style that menu only as deep as ul li ul. When it goes another level deeper, you need to style that as well - ul li ul li ul li

    It's kind of hard to follow because your CSS isn't exactly intuitive.
    The first level is styled by #headerNav ul li
    The second level by #headerNav li ul

    Since you don't specifically style
    #headerNav ul li ul li
    or
    #headerNav ul li ul li ul
    or
    #headerNav ul li ul li ul li
    they inherit the styling of the parent ul/li's

    Does that make any sense at all?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    31
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yep it does actually make a lot of sense what you said, basically i'm not styling the child nodes.

    If i want to display any ul li a, so that the lists are not on the same line but below each other how would i do it?

    I'm trying..

    display:block;

    but it does not seem to be working.

    EDIT: i think i figured it out, who knew making your code more neat and structured will help fix problems. Need to get into the habit of doing this.
    Last edited by KKHAN; 02-18-2013 at 07:30 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Sometimes all that's needed on a child li is float: none; to stop it from behaving like an earlier li.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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