Problem in HTML or CSS

[arifsaroha]

Hello Friends, please check the bug in the following code, when I hover over on (.currency li a:hover) the child "ul" display. but when I hover over child "ul" it hides. What Happen please explain me. thanks

HTML:

<ul class="currency">
    <li>
        <a href="#" title=""> Currency <i class="fa fa-check"></i></a>
        <ul>
            <li><a href="#" title=""><i class="fa fa-dollar"> Dollar </i></a></li>
        </ul>
    </li>
</ul>

css: 

.currency li {
    position:relative;
}
.currency a {
    display: inline-block;
    padding: 10px 0px 12px 0px;
    color: #494940;
    font: 12px "Noto Sans";
}
.currency li ul {
    width: 120px;
    height: 80px;
    position:absolute;
    top: 98%;
    left:0;
    display:none;
    background:#0FF;
}
.currency a:hover + ul {
    display:block;
}

[JorgeM]

I havent tested your code, but i think if you change lines 32-34 to this... it should work.

.currency li:hover ul {
    display:block;
}

[arifsaroha]

Dear JorgeM, Thanks for your reply. but again I found a following problem.

I test this also, but the width of <li> is larger than the <a>. So when cursor is far away from <a> child <ul> displays....

[gabrielcastillo]

Try this:

ul.currency {
   position:relative; 
}

ul.currency li ul {
    width: 120px;
    height: 80px;
    position:absolute;
    top: 98%;
    left:0;
    display:none;
    background:#0FF;
    margin-left:50px;
}


ul.currency li:hover > ul {
    background:red;
    display:block;
}

ul.currency li ul li a {
    display:block;
    padding: 10px 0px 12px 0px;
    color: #494940;
    font: 12px "Noto Sans";
}

[arifsaroha]

Mr. gabrielcastillo, Thanks it works well. but now how can we add transistion effect when displaying "<ul>" on hover.?

[gabrielcastillo]

What kind of transition?