Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] My Flyout menu flies out too much

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #205068
    MojoBob
    Participant

    I’m just getting back into web design after a pretty long break, trying to teach myself javascript and update my ancient CSS knowledge.

    I’m trying to build a list-based vertical multi-level menu that flies out horizontally, and I’ve got it working fine as long as it’s only two levels. However, all levels display at once when I mouse over the top level entry, which means that third level arrays interfere with each other.

    What do I need to do to make sure that child lists of second and higher level entries display only when I mouse over the appropriate parent?

    The file is at mojobob.com/temp/sceamingmenu/screamingmenu.html

    I really need help with this; I’m just flailing around randomly now, trying to make something work.

    #205074
    Paulie_D
    Member

    It’s due to your selectors not be specific enough.

    http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize–net-16048

    You have this rule:

    #main_nav li:hover ul, 
    li.over ul {
        display: block;
    }
    

    What this does is say, when I hover over any li that is a descendant of #main_nav show any ul that might be a descendant of that li.

    Your going to need something like:

    #main_nav li:hover > ul, 
    li.over > ul {
        display: block;
    }
    

    What this does is say, when I hover over any li that is a descendant of #man_nav show only ul that are a direct (i.e. 1 layer down) child of that li.

    #205123
    MojoBob
    Participant

    Thanks very much. Such a simple fix, but I would never have stumbled on it myself.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.