Hover delay / Hover effect staying true after cursor leaving area of effect

Question

I have started making this webpage with a hover menu of flags ment for changing language of my webpage.

there are three flags displayed. This is a hover where the danish and german flag will only appear when i hover over the british flag.

This however creates a problem because there is a gab between the flags of 10 pixels. and as soon as the cursor leaves the british flag then the hover menu disapears. I need some kind of delay that will make the hover effect stay true for 1-2 sec after the cursor leaves area of effect. So that i can reach the danish and german flag.

My Html Code:

<div id="nav"> 
<ul style="list-style:none;">
<li><img id="England" src="England.png">
<ul style="list-style:none;">   
<li><img id="Denmark" src="Denmark.png"></li>
<li><img id="Germany" src="Germany.png"></li>
</ul>
</li>
</ul>
</div>

My CSS code:

#nav ul li:hover ul{
display: block;

}

#nav ul ul{
display: none;

}

#England{
image-size:absolute;
height:60px;
width:86px;
position: absolute;
top:10px;
left:524px;
}

#Denmark{
image-size:absolute;
height:60px;
width:86px;
position: absolute;
top:80px;
left:524px;
}

#Germany{
image-size:absolute;
height:60px;
width:86px;
position: absolute;
top:150px;
left:524px;
}

I have tried using transition-delay:1s; but without luck. is there any brilliant minds out there that can help me out?

Answer 1

The answer is not to position all the the list items individually but rather the grouping of them in the parent ul.

By applying position:absolute and top:100%, the submenu will always be below the parent li without any gap regardless of how tall the parent li is.

* { /* quick reset */
    margin: 0;
    padding: 0;
}

#nav{ /* just for spacing in demo */
    padding: 25px;
}
#nav > ul > li {
    position: relative; /* positioning context */
    background: lightgreen;
    display: inline-block;
}
#nav ul ul {
    display: none;
    position: absolute;
    top:100%;
    left:0;
    background: orange;
}
#nav ul li:hover ul {
    display: block;
}

<div id="nav">
    <ul style="list-style:none;">
        <li>Flags
            <ul style="list-style:none;">
                <li>England</li>
                <li>Denmark</li>
                <li>Germany</li>
            </ul>
        </li>
    </ul>
</div>

Absolute positioning is a very poor layout method and should only be used for specific effects. It has its place but nudging every element into exactly the right spot isn't it. This might help LearnLayout.com

Answer 2

I tested this and it works for me :)

JS Fiddle: http://jsfiddle.net/ogwdgwew/

What I did was put all of the elements in a single ul, but added pseudo ::before elements to the Denmark and Germany flags so that they bridged the previously empty gap.

HTML:

<div id="nav"> 
<ul id="flags">
    <li><img id="England" src="England.png"/></li>
    <li><img id="Denmark" src="Denmark.png"/></li>
    <li><img id="Germany" src="Germany.png"/></li>
</ul>
</div>

CSS:

#England{
height:60px;
width:86px;
position: absolute;
top:10px;
left:524px;
}

#Denmark::before,
#Germany::before{
position: absolute;
width: 86px;
height: 10px;
content: "";
top: -10px;
}

#Denmark{
height:60px;
width:86px;
position: absolute;
top:80px;
left:524px;
display: none;
}

#Germany{
height:60px;
width:86px;
position: absolute;
top:150px;
left:524px;
display: none;
}
#flags{
list-style: none;
}

#flags:hover *{
display: block;
}

Answer 3

Okay thx to all for helping me. it was without doubt you guys who inspired me to come up with a solution and this has been a very good learning lesson for me.

I came up with this solution for my problem:

HTML:

<div id="nav">
<ul style="list-style:none;">
<li><img id="England" src="England.png">
<ul style="list-style:none;">
<li><img id="Denmark" src="Denmark.png"></li>
<li><img id="Germany" src="Germany.png"></li>
</ul>
</li>
</ul>
</div>

CSS:

#nav{ /* just for spacing in demo */
position: absolute;
top:10px;
left:524px;
}

#nav > ul > li {
position: relative; /* positioning context */
background: transparent;
display: inline-block;
}

#nav ul ul {
display: none;
position: absolute;
top:100%;
left:0;
background: transparent;
}

#nav ul li:hover ul {
display: block;
}