CODEWITHSUNDEEP
htmlcssdrop-down-menuhover
Spikatrix
Spikatrix

Reputation: 20244

Delay before drop-down menu disappears

I've managed to create a drop-down menu using CSS and HTML. The drop-down menu will appear when mouse-hovered.

I want the drop-down menu to disappear 1 second after the mouse is hovered out. For this, I've tried adding

transition: display 1s;

into .dropdown:hover .dropdown_list, .dropdown_list:hover but it doesn't do anything.

My Code:

* {
    margin: 0;
    padding: 0;
}
header {
    position: fixed;
    height: 35px;
    width: 100%;
    background: black;
}
.top-container {
    margin-top: 7px;
}
/* Code for drop-down list */
 .dropdown {
    margin-left: 100px;
    display: inline-block;
    color: #FFF;
}
.dropdown:hover {
    text-shadow:0px 4px 7px white;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
    display: block;
    top:100%;
    
    transition: display 1s; /* Doesn't work */
}
.dropdown_list {
    list-style: none;
    display: none;
    position: absolute;
    color: red;
    width: 100px;
}
.dropdown_list li {
    background: yellow;
}
li {
    border: 1px solid black;
}
<body>
    <header>
        <div class="top-container">
            <div class="dropdown">Dropdown &#10097;
                <ul class="dropdown_list">
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                </ul>
            </div>
        </div>
    </header>
</body>

How do I make a one second delay for the drop-down menu to disappear after hovering out? Is this possible without any jQuery or Javascript?

Upvotes: 2

Views: 1600

Answers (1)

Ryan
Ryan

Reputation: 416

Transition only applies to properties with numerical values. Display uses discrete values, so it cannot receive any transition effects.

With just CSS you can use top or similar properties to 'hide' the drop-down menu (jsfiddle).

.dropdown:hover .dropdown_list,
.dropdown_list:hover {
    top: 100%;
    transition: none;
}
.dropdown_list {
    top: -10000%;
    display: block;
    transition: top 1s step-end;
}

Upvotes: 1

Related Questions