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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post

    how to style a 10 level submenu

    I'm trying to submit a custom Wordpress theme to Wordpress.org.

    One of the requirements is that the theme displays properly with test content.

    This content includes a CSS menu with 10 sublevels. See it in action. The 10 level menu is titled "Depth" at top middle.

    The sublevels extend horizontally.

    Is there a way to zig zag these like you see in a Windows Start menu? I'm not good with CSS.

    Bonus - is there a way to prevent the 1-2 px overlap between sublevels?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 588 Times in 587 Posts
    Nice looking site. 10 levels is probably way too much. I like my menus to be CSS. Here is a site with an explanation and code http://www.bappi-d-great.com/create-...n-menu-in-css/. Just gotta keep adding the CSS rules.
    Evolution - The non-random survival of random variants.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Thanks sunfighter. 10 levels is an unusual amount but the CSS must be able to handle anything.

    I have used a snippet of your CSS code.

    I now see a cascade for the first 3 levels.

    However, when I go to hover over Level 03, the drop down disappears.

    Can you see why?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 588 Times in 587 Posts
    Works ok in FF. really bad in IE.

    Suggest you try the code in a page that does not have all the baggage that is on http://tester.doig.com.au/ just the div, the menu, and css and see how it works. It would be easier to trouble shoot.
    Evolution - The non-random survival of random variants.

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Yep. The stripped back version works fine.

    For me, the full version doesn't work in FF. Same problem as Chrome. Can't continue down the chain past Level 03.

    Maybe I need to adjust the z-index of the top menu to be above that of the main (2nd menu).

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 588 Times in 587 Posts
    It's a little different. I'd put the level 3 tier back into the Level 1-> Level 2-> Level 3 dropdown back in for kicks.

    Right now placing my mouse into Level02 is a hit or miss operation. Sometimes I can get Level 03, sometimes not. Definitely nothing beyond that.
    Evolution - The non-random survival of random variants.

  • #7
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    It works fine for me on Chrome. I can see all 10 levels.

    But, it doesn't "work" sometimes because each level has a 1 pixel gap between them. So unless you hover to the next level at a fast speed, your mouse will hover over that 1px gap and think you're no longer hovering over the menu.
    My signature :)

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,029
    Thanks
    23
    Thanked 588 Times in 587 Posts
    OK, if your happy, I'm happy.
    Evolution - The non-random survival of random variants.

  • #9
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Quote Originally Posted by ttkim View Post
    But, it doesn't "work" sometimes because each level has a 1 pixel gap between them. So unless you hover to the next level at a fast speed, your mouse will hover over that 1px gap and think you're no longer hovering over the menu.
    I can't see what is generating the 1px gap between sub levels.

    Can you?

    Thanks.

  • #10
    New Coder
    Join Date
    Nov 2013
    Posts
    33
    Thanks
    2
    Thanked 0 Times in 0 Posts
    The site is looking really great man but I am having a hard time trying to open levels of your "depth" menu without it closing them all on me. I think it might have a margin set that is going on.

  • #11
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    There is a 1px gap between sub levels.

    Can you see what is generating this?

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You have
    Code:
    #topmenu ul.nav-top ul ul {
        left: 45px;
        position: absolute;
        top: 49px;
        visibility: visible;
    }
    , at line 274.

    Reducing that top by 1px may resolve it. Btw, I'd recommend to use em based values to sit everything in order even in the zoomed-in/out view. (For example, have a try after setting top:3em;)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    SRD75 (11-27-2013)

  • #13
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    Spot on abduraooft. Thank you once again.

  • #14
    Regular Coder
    Join Date
    Sep 2011
    Posts
    265
    Thanks
    49
    Thanked 1 Time in 1 Post
    So now the menu works in isolation, but not in conjunction with the menu below it, which steals the focus.

    I can't set the z-index, because z-index only works on specifically positioned elements.

    Any ideas how I can resolve this?

  • #15
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    #topmenu ul.nav-top {
        position: relative;
        z-index: 597;
    }
    Code:
    #mainmenu ul.nav-primary {
        position: relative;
        z-index: 597;
    }
    What's the point in setting the same z-index to both <ul>s ? Reduce (or just remove?) the second one and see if it's okay.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  
    Page 1 of 2 12 LastLast

    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
    •