Question regarding submenu

HTML & CSS
1

Hello,
please take a look at this page: http://old1.petpal.co.il/
The submenu that popsup when hovering the 3 bars icon to the left.
How can I make that navbar stay excactly where it is, but without having to do some fixed pixels calculation?
I mean to remove the top:133px and top:103px stuff, because the navigation bar isn’t a fixed height.

Any ideas?

1 Like
2

Try changing

(line 49)

#site-navigation li.second-level ul {
    top:100%;   /* changed from top:133px */
}

This will affect the animation, but maybe you can work with it.

1 Like
3

Works great, thanks, no idea how I didn’t think about it, was rather simple.

Got another question:
So as you can see there’s a gap between the 3 bars icon and the submenu itself, this is intended as I think it looks prettier than if the submenu will be related to the icon itself.

The question is if there can be some solution so if people move mouse toward the menu make it not start to fade as soon as they leave the icon area, because that creates an ugly effect, however I tried transition-delay and i didnt really like the result, since then even if you move mouse without intention to use the menu, there will still be a delay (i.e. moving the mouse out of the menu itself should make the menu fade instantly, rather than with delay).

If the above hasn’t any other solutinos than with transition-delay, then i’ll make the submenu relative to the

  • element, however I would still like it to stretch to 100% of the width of the #last-li element, any ideas?

    • 4

    Hey, ulthane, the home page has changed.!!!.

    Can you put the other version (assuming you prefer that style) online separately? I was experimenting with it.

    5

    Hey, thanks for the help, but I went for another approach, and i’m happier with it :slight_smile:
    I’ve just finished it all and its even responsive!
    Links that have no space are being moved to the submenu, and the 3 most important links are always being displayed no matter how small the screen is.
    If you can give it a test and let me know what you think ^^.

    6

    That looks very good to me. Maintainable, too. The HTML is cleaner than the other method would have been.

    Nicely done, ulthane.

    7

    This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.