CSS submenu anchor hover issue

Question

I'm creating a pure CSS-based dropdown-menu using values in a multidimensional array. The menu setup is horizontal, subpages vertically, then sub-subpages vertically to the right of the subpage. Hope you know what I mean..

Now I got the sub-menu working correctly but I'm facing difficulties positioning the sub-sub menu (I'm working with three tiers) I want the 3rd menu to appear only if the sub-menu item HAS subpages to it. To do this I add a class to the anchor if it's true. No problem so far it sets the class correctly. However, then, in my css, I got this to display the 3rd tier:

#navcontainer ul li ul.submenu li a.hasSub:hover > ul.submenu2
{
display: list-item;
}

But it's not working.

To display the 2st tier I have this:

#navcontainer ul li:hover > ul.submenu
{
display: list-item;
}

And that's working.

The index file looks like this: (I know it's a bit messy I know..)

<div id="navcontainer">
    <!--MAIN MENU-->
    <ul>
    <?php
    foreach ($aMenu as $page){ ?>
        <li>
            <a href="<?php echo $page['url']; ?>"><?php echo $page['name']; ?></a>
            <!--CHECKS IF LIST ITEM HAS SUB PAGES-->
            <?php if(isset($page['subpages'])){ ?>
                <ul class="submenu">
                    <li>
                    <?php foreach ($page['subpages'] as $subpage){ ?>
                        <?php if(isset($subpage['subpages'])){ ?>
                            <a class="hasSub" href="<?php echo $subpage['url']; ?>"><?php echo $subpage['name']; ?></a> <?php
                        } else { ?>
                            <a href="<?php echo $subpage['url']; ?>"><?php echo $subpage['name']; ?></a> <?php
                        }?>
                        <!--CHECKS IF SUB-LIST ITEM HAS SUB PAGES-->
                        <?php if(isset($subpage['subpages'])){ ?>
                            <ul class="submenu2">
                                <li>
                                <?php foreach ($subpage['subpages'] as $subpage){ ?>
                                    <a href="<?php echo $subpage['url']; ?>"><?php echo $subpage['name']; ?></a>
                                <?php } ?>
                                </li>
                            </ul>
                        <?php } ?>
                    <?php } ?>
                    </li>
                </ul>
            <?php } ?>
        </li>
        <?php
    } ?>
    </ul>
</div>

Now, if I do this instead:

#navcontainer ul li ul.submenu li:hover > ul.submenu2
{
display: list-item;
}

It displays the 3rd menu but it does it regardless of which one I hover.

Rest of my CSS:

#navcontainer ul
{
list-style-type: none;
position: relative;
display: inline-table;
}

#navcontainer ul:after 
{
clear: both; 
display: block;
}

#navcontainer ul li 
{ 
float: left; 
}

#navcontainer ul ul
{ 
display: none;
position: absolute;
top: 100%;
padding: 0;
}

#navcontainer ul ul ul 
{
display: none;
position: absolute;
left: 100%; 
top: 0;
}

score 0 · Answer 1 · 2015-02-07T01:58:08.843

0

Your first attempt at the top doesn't work because you have a.hasSub:hover > ul.submenu2 and the submenu is not a child of the link (it's a child of the li).

Also, your selectors seem unnecessarily complex. Also it's not clear to me why you are using display: list-item.

In any event, more or less the equivalent of what you have above is:

#navcontainer li:hover > .submenu,
#navcontainer li:hover > .submenu2 {
    display: list-item;
}

In other words, any time you hover over a list item that has a submenu in it, open that submenu.

If the CSS you use to hide the submenus is as complicated as what you show above, then the above may need to be made more specific to take precedence.

edited Feb 07 '15 at 01:58

answered Feb 06 '15 at 23:21

Hey, thanks for your input. I edited in the rest of my CSS for you to see. I'm weak with selectors... I followed a tutorial on the CSS part, so I can't answer why I use display: list-item. However I do agree that the selectors looks complex.. – Johan Samuelsson Feb 06 '15 at 23:46
Actually, the rest of the CSS doesn't look overly complex. Since you have added classes to the submenus, **#navcontainer .submenu** is the equivalent of **#navcontainer ul ul** and **#navcontainer .submenu2** is the equivalent of **#navcontainer ul ul ul**. – Feb 07 '15 at 00:22

CSS submenu anchor hover issue

1 Answers1