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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gap betwen nested list items breaks css rollover menu

    Hello there, I am having a bit of trouble with a CSS rollover menu.
    What I have is is a CSS nav built with nested <ul> tags. The rollovers work fine and the submenu shows up, but the problem is that there is a small gap between the <li> tags that messes up the functionality.

    When you roll through and come across the gap, the submenu disappears.

    Here is an example.

    Ive played with the margins and padding on the <ul>, the <li> and the <a> tags on both levels of the nesting but the gap remains.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello shaman420,
    Seems to work fine for me with FF3.6 and IE8.
    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
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I see the gap on his second level menu..when your mouse rolls over the gap, they disappear. I tried looking at your code earlier to see where the gap is coming from. I couldnt find any margins on your <li> tags in your stylesheet, but I might have overlooked something.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Nope, works fine here. The only thing I see is Company History is misspelled.
    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

  • #5
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,922
    Thanks
    15
    Thanked 229 Times in 229 Posts
    The basic problem is that the hover is only applied to the a, which really means the text in the a tags. So I increased the font-size to 18px and now it does well. But it was flakey, sometimes work, sometimes not, before.

    PS: works OK in Opera and Firefox now.
    Last edited by DrDOS; 11-10-2010 at 05:58 PM.

  • #6
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since posting this, I found that changed the display:

    .nav ul li

    to

    display:table-cell

    That removes the gap and the menu works fine, just not in IE6-7..

  • #7
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,922
    Thanks
    15
    Thanked 229 Times in 229 Posts
    Quote Originally Posted by shaman420 View Post
    Since posting this, I found that changed the display:

    .nav ul li

    to

    display:table-cell

    That removes the gap and the menu works fine, just not in IE6-7..
    If you've made that change on your web page it's still flakey on FF now, and IE 6 & 7 depends on the a text for hover. If I were you I would still make the font-size 18px, that should get it working on all browsers. I'll keep checking your site to see any improvement.


  •  

    Posting Permissions

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