为什么我的css转换不起作用

Question

我的css过渡不起作用，我想给我的下拉菜单一个转换，我的只是没有回应。我希望你能帮助我解决它。我还要感谢我对错误的解释。

Lorem ipsum dolor sit amet，vero albucius singulis mea ut。 Qui tibique mentitum ea，pro dicta euripidis te。 Ut mel sale sale antiopam。 Est nobis homero cu，职业选自cetero fabellas.Lorem ipsum dolor sit amet，vero albucius singulis mea ut。 Qui tibique mentitum ea，pro dicta euripidis te。 Ut mel sale sale antiopam。 Est nobis homero cu，职业选自cetero fabellas.Lorem ipsum dolor sit amet，vero albucius singulis mea ut。 Qui tibique mentitum ea，pro dicta euripidis te。 Ut mel sale sale antiopam。 Est nobis homero cu，职业选手cetero fabellas

body, html{
	margin:0;
	font:1em "papyrus";
	background-color: #f4d56e;
}

.content{
	padding: 30px;
}

.nav-main{
	width: 100%;
	background-color: #700707;
	height: 70px;
	color: white;
}

.nav-main .logo{
	float: left;
	height: 70px;
	padding: 15px 30px;
	line-height: 40px;
}

.nav-main img{
	margin-top: -30px;
	margin-right: -25px;
}

.nav-main > ul{
	margin:0;
	padding: 0;
	list-style-type: none;
}

.nav-main >ul > li{
	float: left;
}

.nav-item{
	display: inline-block;
	padding: 15px 126.1px;
	height: 40px;
	line-height: 45px;
	color: white;
	text-decoration: none;
}

.nav-item:hover{
	background-color: #B82023;
}
.drop-down-menu{
	display: none;
	height: 0;
	opacity: 0;
	top: 255;
	margin: 0;
	padding: 0;
	background-color: #700707;
	list-style-type: none;
	overflow: hidden;

	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
} /* this is the transition that is not working*/

.drop-down-menu li{
	padding: 0;
}

.drop-down-menu li:hover {
	background-color: #B82023;
	text-decoration:underline;
}

.drop-down-menu ul{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.drop-down-menu li a {
	color: white;
	text-decoration: none;
	background-color: #700707;
	width: 100%;
	display: inline-block;
	padding-top:  8px;
	padding-bottom: 8px;
	padding-left: 16px;
	padding-right: 7px;
	line-height: 50px;
}

.drop-down-menu a:hover {
	background-color: #B82023;
}


li:hover .drop-down-menu{
	display: block;
	height: 198px;
	opacity: 1;
	top: 40px;

	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;	
} /*This one is another that is not working*/

.content {
	z-index: -1;
	position: absolute;
}

<div id="container">

			<nav class="nav-main">
				<div class="logo">
					<a href=""><img src="file:///Users/waynarbocangel/Documents/momoka_webpage/media/Logo-momoka--cono-l%C3%ADneas.png" alt="Momoka: Crepes & Arabica" class="logo" /></a>
				</div>
				
				<ul>
					<li class="nav-li"><a href="" class="nav-item">Home</a></li>
					<li class="nav-li"><a href="" class="nav-item">Menu</a>
								<ul class="drop-down-menu">
									<li><a href="">Coffees</a></li>
									<li><a href="">Crepes</a></li>
									<li><a href="">Juices and Teas</a></li>
								</ul>
					</li>
					<li class="nav-li"><a href="" class="nav-item">Offerts</a>
								<ul class="drop-down-menu">
									<li><a href="">Something</a></li>
									<li><a href="">Something</a></li>
									<li><a href="">Something</a></li>
								</ul>
					</li>
					<li class="nav-li"><a href="" class="nav-item">Contact</a>
								<ul class="drop-down-menu">
									<li><a href="">Something</a></li>
									<li><a href="">Something</a></li>
									<li><a href="">Something</a></li>
								</ul>	
					</li>
				</ul>
			
			</nav>

			<div class="content">
				<h1>Hi Welcome!</h1>
				<p>Lorem ipsum dolor sit amet, vero albucius singulis mea ut. Qui tibique mentitum ea, pro dicta euripidis te. Ut mel sale antiopam. Est nobis homero cu, pro in cetero fabellas</p>

				<p>In vix epicurei pericula conclusionemque, vim abhorreant theophrastus conclusionemque ne. An ius option alterum tibique, iisque moderatius quo ne. Mei id utamur consequat sadipscing. Augue iudicabit expetendis mei ne. Iuvaret splendide ea mel, sumo clita vitae sit cu. In feugait expetenda nec. Quod sonet lobortis ius ne.</p>

				<p>Nec no veri verear, ex illum epicurei eam, dicat velit appetere no mea. Nulla persequeris comprehensam sit cu, eam inani nemore detracto ea. Vel ne graeci senserit, rebum erant nec ex, cum alii semper euripidis in. Semper utroque sapientem ex quo. Per id case interesset, percipit volutpat cum ex, in sit civibus instructior.</p>

				<p>Eos animal alterum cu, esse audire debitis ne his. Eos graeci indoctum efficiantur cu, est id tantas regione omnesque. Tota contentiones ut vel, mel idque sonet mnesarchum et. Vis eu forensibus referrentur, odio fierent te cum, qui mazim putent antiopam ex.
				</p>
			</div>

		</div>

Answer 1

由于您正在将状态从display: none;更改为display: block，因此您的转换无效。过渡不会影响到这一点。将display: block;属性保留在第二级ul，并在悬停时将高度在0和198px之间切换。像这样：

.drop-down-menu {
    display: block;
}