CODEWITHSUNDEEP
htmlcsscss-transitionstransition
Imran Omer
Imran Omer

Reputation: 701

How to Apply CSS Transition to Hover Menu

I am trying to create a Hover menu but want to make the hovered menu opened for some time for example 2 seconds. I am trying to add CSS transition for this bu its not working. I am using the following style CSS:

.drop_menu {
    background:#10BDF5;
    padding:0;
    margin:0;
    list-style-type:none;
    height:25px;
}
.drop_menu li { float:left; }
.drop_menu li a {
    padding:3px 6px;
    display:block;
    color:#FFF;
    text-decoration:none;

    font-size: 11px;
    line-height: 22px;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#51C7ED;}
.drop_menu li:hover ul {
    left:0px;
    top:28px;
    background:#51C7ED;
    padding:0px;
    border-bottom: 5px solid #1292BB;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;

    /* LOOK AT THESE CSS TRANSITION PROPERTIES */
    -webkit-transition: visibility 2s ease-in;
    -moz-transition: visibility 2s ease-in;
}

.drop_menu li:hover ul li a {
    padding:1px 4px;
    display:block;
    width:200px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED; }

Please see the property just under this line: /* LOOK AT THESE CSS TRANSITION PROPERTIES */ am I using the correct syntax or property?

Upvotes: 0

Views: 2072

Answers (1)

MANOJ GOPI
MANOJ GOPI

Reputation: 1279

This helped for me link where they used opacity instead of display: none;

.drop_menu li:hover ul {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.drop_menu li ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

Hope this will help you.

Edited HTML CSS from comments:

Html Editor1: http://codepen.io/anon/pen/ByLVym

Html Editor2: http://codepen.io/anon/pen/ogzygb

Upvotes: 1

Related Questions