Grow your CSS skills. Land your dream job.

Horizontal List Navigation with non absolute submenus

  • # March 21, 2009 at 10:52 am

    Hi,

    I’m trying to do a special kind of horizontal menu and I need some help.

    The menu should have:

    - 1 sublevel
    - the sublevel items should appear only when I hover over the mainmenu items
    - the sublevel items should stay at one position (on the left) and not move absolutely with/to the mainmenu items

    I don’t know how to do the third point. Every menu I’ve found has these absolutly positioned submenu items.

    I’ve been searching around the web for a solution to this. I’ve just found this viewtopic.php?f=2&t=1926&p=9315 which is kind of close. I would appreciate if someone could push me in the right direction and make a suggestion what I need to do to work with http://www.strictlycss.com/articles/article/59/horizontal-and-tabbed-css-menu-with-sub-menu this approach to tweak it for my purpose.

    # March 21, 2009 at 11:44 am

    Not really sure what you are trying to do. If I understand correctly then you want your submenu to appear somewhere else on the page when an item on the main menu is hovered over? The most obvious problem I see there is that using just CSS, :hover has only 2 states, ie. you are either hovering over something or you are not. So you hover over an item on your main menu and the submenu appears elsewhere, as soon as you move your cursor away from the main menu towards the submenu, you will no longer be hovering and the sub menu will disappear!
    I would suggest looking at a javscript (jQuery?) solution. Or I have misunderstood completely.

    # March 21, 2009 at 12:11 pm

    Thanks for your answer.

    I found something that brought me further, like this: http://www.tjkdesign.com/articles/new_drop_down/TZ.asp

    Guess I just did my research a bit sloppy.

    # March 21, 2009 at 12:40 pm

    Ahh. I see. I had the wrong end of the stick :oops:

    Glad you found what you needed.

    # March 21, 2009 at 12:45 pm

    I’m not sure I 100% understand either but the first thing I thought of was Stu’s droplines:

    http://www.cssplay.co.uk/menus/pro_dropline.html

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".