Can't hover the child menu while creating css menu

Question

I am trying to create simple css menu with the following structure:

<section id="navigation-bar" class="container">
    <nav class="pull-left">
        <ul class="multiColumnMenu">
            <li>
                <a href="#">Menu 1</a>
                <div class="column-menu">
                    <ul>
                        <li> Sub menu 1 </li>
                        <li> Sub menu 2 </li>
                        <li> Sub menu 3 </li>
                        <li> Sub menu 4 </li>
                        <li> Sub menu 5 </li>
                    </ul>
                </div>                          
            </li>
        ...
        </ul>
    </nav>
</section>

I trigger the menu with this css

.multiColumnMenu > li:hover  .column-menu{
    display: block;
}

The menu shows up but I can't hover over it. When I hover over it, it goes away.

Demo

Remove the margin-top:8px; and it will work. The column-menu needs to be near the li so these 8px gap makes the mouse go out of your li there fore the :hover state is lost. — RaphaelDDL
– RaphaelDDL, Commented May 14, 2013 at 13:40

dsgriffin · Accepted Answer · 2013-05-14 13:43:56Z

4

It's the margin-top inside .column-menu causing it to disappear before you can hover over (due to the physical gap between the elements, the :hover state is lost) - remove that and it works fine.

jsFiddle here.

edited May 14, 2013 at 13:43

answered May 14, 2013 at 13:38

dsgriffin

68.8k17 gold badges141 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrN Over a year ago

Great, what is the reason for this behaviour?

Neil Hibbert Over a year ago

If you want the gap add an 8px margin to the bottom of the anchor tag in the top menu to get the same effect without losing the hover state...

Cam · Accepted Answer · 2013-05-14 13:44:56Z

0

THe quick and easy fix, but I dont think this is exactly how you want it to be done is to take your margin-top: 8px completely off. That will make your dropdown work. See code below

 .column-menu {
display: none;
left: 5px;
margin-top: 0px;
width: 300px;
height: 200px;
color: #7B0000;
background: rgb(252, 252, 252);
border: 1px #ccc solid;
border-bottom: 3px #ccc solid;
position: absolute;
z-index: 20;
  }

answered May 14, 2013 at 13:44

Cam

1,90211 silver badges25 bronze badges

Collectives™ on Stack Overflow

Can't hover the child menu while creating css menu

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related