css - 如何通过动画（类似于过渡）使导航栏中的下拉内容出现？

问题描述

注意：导航栏不在引导程序中

好的，所以，当我将鼠标悬停在“更多”按钮上时，它会显示下拉内容，但它会突然出现，当我将鼠标移到其他地方时，它会突然消失。我想要的是让下拉内容通过过渡或类似的方式出现。这是我的代码：

<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;
/*border: 1px solid black;*/
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;
}````

标签： csshtml

css - 如何通过动画（类似于过渡）使导航栏中的下拉内容出现？

问题描述

解决方案

推荐阅读