IMPORTANT: THE NAVIGATION BAR IS NOT USING BOOTSTRAP
When I hover over the "More" button, the dropdown content appears suddenly and disappears abruptly when moving the mouse away. I would like to add a transition effect to make the dropdown content appear smoothly. Here is the code snippet:
<nav>
<ul>
<li><a href="home.php">Home</a></li>
<li><a href="earnpoints.php">Earn Coins</a></li>
<li><a href="getrewards.php">Get Rewards</a></li>
<li><a href="referrals.php">Referrals</a></li>
<li><a href="vouchers.php">Vouchers</a></li>
<li><div class="dropdownd">
<a href="#" class="dropbtnd">More</a>
<i class="fa fa-caret-down"></i>
<div class="dropdown-contentd">
<a class="dropdowncontentn" href="leaderboard.php">Leaderboard</a>
<a class="dropdowncontentn" href="partnerships.php">Partnerships</a>
<a class="dropdowncontentn" href="contact.php">Contact us</a>
<a class="dropdowncontentn" href="socialmedia.php">Social Media</a>
<a class="dropdowncontentn" href="settings.php">Settings</a>
</div>
</div> </li>
<li>
<a href="#">
<i class="fa fa-bars"></i>
</a>
</li>
<li class="thum" style="float:right;margin-right:25px;">
<a onClick="navbar_coins_refresh.php" href="#" class="coinsnumber"><?php include 'navbar_coins.php'; ?></a>
</li>
</ul>
</nav>
# CSS #
* {
box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav ul li a {
color: #FFF;
text-decoration: none;
font-size: 16px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
padding: 15px;
font-family: Ubuntu;
}
nav ul li a:hover {
text-decoration: none;
color: #444;
}
nav ul li a.coinsnumber:hover {
text-decoration: none;
color: white;
}
.dropdown-contentd {
display: none;
position: absolute;
top: 49px;
background-color: royalblue;
color: #FFF;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
z-index: 1;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
.dropdown-contentd a {
float: none;
color: black;
padding: 12px 16px;
color: #ffffff;
text-decoration: none;
display: block;
text-align: left;
transition: all .3s ease;
background-color: royalblue;
}
.dropdown-contentd a:hover {
color: #444;
}
.dropdownd:hover .dropdown-contentd {
display: block;
}
/* End General */
/* Start Navbar */
nav ul {
background-color: royalblue;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
nav ul > li {
padding-left: 20px;
padding-right: 20px;
padding: 15px;
display: inline-block;
transition: all .3s ease;
margin-left: -5px
}
nav ul > ol {
position: absolute;
top: 49px;
right: 0;
background: #333;
text-align: center;
list-style: none;
display: none
}
nav ul > ol > li {
width: 100vw;
color: #FFF;
margin: 0;
padding: 0;
padding-top: 10px;
padding-bottom: 10px;
transition: all .3s ease;
}
nav ul > ol > li:hover a {
margin: 20px;
}
nav ul > ol > li:hover {
background: #000;
cursor: pointer
}
nav ul input {
opacity: .7;
padding: 5px;
float: right;
display: none
}
/* Start Menue Right */
/* Start Media Query */
@media screen and (max-width:950px){
nav ul > li:not(:first-child) {
display:none;
}
nav ul > li:nth-last-of-type(2) {
display: inline-block;
}
nav ul > li:last-of-type {
display: inline-block;
}
}
@media screen and (min-width:950px) {
nav ul > ol > li {
display:none
}
nav ul > li:nth-last-of-type(2) {
display: none
}
}
.dropdowncontentn {
background-color: royalblue;
}
nav {
z-index: 1;
position: fixed;
right: 0;
left: 0;
top: 0;
}