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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question Unable to click on drop-down menu items

    Hi there,
    I'm nearly done with this site, and I've modified the heck out of the template the client chose. But suddenly I've got an issue with my menus that wasn't there earlier. I'm sure I screwed something up in the CSS, but I've been staring at it for so long now I know it's at the point where I need a fresh pair o eyes.

    This is the development site: http://dev.yourbusybee.com/kaleco2/galleries/

    The issue is this:
    If you mouseover the menu item "Galleries" or "Color Bar", you get a nice drop-down. This is lovely. And you can mouseover and click on the first of these drop-downs. But if you try to mouse down any further, the menu disappears. AGHHHHHH

    But the menu works mostly ok on the homepage (there seem to be some slight spacing issues, but otherwise the dropdowns are clickable. Grrrrrr

    Is this a z-index thing? I don't know. I'm just frustrated.

    Any help will be greatly appreciated.

    Note: I don't pretend to be an expert at ALL. I fiddle around and figure stuff out.

    ~Laura
    Last edited by operapixie; 01-18-2013 at 06:15 AM.

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    That's a javascript-based menu. You might want to try in the javascript forum. If not, or if no response, try http://www.htmldog.com/articles/suckerfish/dropdowns/. Halfway the page you will find multi-level menus.

    If the Suckerfish page goes to fast for you or if you like an alternative introduction to CSS-based menus, start with my tutorial, linked from my signature.
    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.

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Oh goodness. I had no idea this was likely to be a javascript issue. My apologies. I will go post over there right now! Thanks so much for taking the time to let me know that :-)

    ~Laura

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    No, this is a css issue - that is a suckerfish menu. There are two issues: #color_header is behind #main, and within #color_header .mainmenu is behind #pagetitle. Both of these mean that the drop down menu loses focus on :hover when the mouse moves down, and so the menu disappears.

    Have a try making the following amendments to your css (style.php), in red:

    Code:
    #color_header {
        background-color: transparent;
        background-image: none;
        margin-top: -85px;
        max-height: 40px;
        position: relative;
        z-index:3
    }
    
    .mainmenu {
        background: none repeat scroll 0 0 transparent;
        height: 3em;
        position: relative;
        z-index: 2;
    }
    
    div#pagetitle.clearfix.row {
        background: none repeat scroll 0 0 transparent;
        position: relative;
        z-index: 1;
    }
    Incidentally, you have a style tag located between your head and body tags. I'd sort that as it may lead to unexpected behaviour.
    Last edited by SB65; 01-20-2013 at 08:59 AM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    No, this is a css issue
    Upon closer examination: you're right. Because the menu has a roll-out effect, I thought it was a JS-menu. But with JS off, it still works and shows the same problem. Only the roll-out effect is then no more.

    Go with SB65's advice, Laura.
    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.

  • #6
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thank you so much, SB65! Huge improvement! It still sits underneath the breadcrumbs but I'm sure I can solve that.

    I am curious, though, whether there's a way to make the mouseoever a bit easier. It seems like I have to maneuver my mouse directly over the arrow at the top of the drop down in order to get to those menu items. I would prefer to be able to just drag my mouse from wherever on the main menu item I happened to be (which would still be along the length of the drop-down), and get to the sub-menu. Does that make any sense?

    ~Laura

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Breadcrumbs is just another z-index issue - set the z-index on the element to lower than that on the menu element, and make sure to set position:relative on the breadcrumbs as well.

    I can't see your issue with navigating to the dropdowns using FF18. In what browser do you see this?
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #8
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I'm also using FF18.0. Hmmmm

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have a try making your css:

    Code:
    ul.sub-menu {
        margin-top: -27px;
    }
    I think the sub menu may just be positioned a bit low - with the result that the :hover state is lost when navigating from main to submenu.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • #10
    Regular Coder
    Join Date
    Nov 2011
    Posts
    136
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Dang! A difference of 2 pixels seems to have fixed that! THANK you. The only thing I still see as a slight issue is now the sub-SUB menu positioning. It's just slightly high. But I don't see a separate class from sub-menu in order to separately position that down a tad. Any ideas there?

    Also, you'd noted that there was a style tag after the body that might cause problems. I think I know what that was in reference to, but I would appreciate if you could check to see if I've solved it. I had a code snippet for determining if a post was in a particular category and if it was not, to use some different styling. I found that I'd put that in just below the </head> tag. I've now moved it to above that area.

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You don't currently have a style setting for the sub-sub-menu, no, but you can create one:

    Code:
    .sub-menu .sub.menu{
       ...styling...
    }
    You can check the rendered code by viewing the source of the page - Ctrl+U in everything except IE, and Page > View Source in IE. Yes, that style snippet is now in the head. The validator (see link in my sig) will also pick up these sorts of things for you.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Posting Permissions

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