ul { list-style:none margin:0 padding:0 text-align:center background:#F03 color:#FFF -webkit-transform:scaleY(0) -webkit-transform-origin:0 0 }
li { padding:0 margin:0 }
div { width:200px }
div:hover ul { -webkit-animation:ulShow 0.4s -webkit-animation-fill-mode:forwards -webkit-animation-timing-function: cubic-bezier(0,0.8,0.9,1) }
div div { height:30px line-height:30px text-align:center background-color:#FC0 }
@-webkit-keyframes ulShow {
from { -webkit-transform:scaleY(0) }
to { -webkit-transform:scaleY(1) }
} <!-- HTML部分 -->
<div>
<div>下拉 </div>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</div>
本例适用于谷歌浏览器和Safari浏览器，如需兼容Opera须将“-webkit-”更改为”-o-“，火狐改为“-moz-
”，IE系列比较复杂在此不予举例详情请查询W3C。
您可以使用 CSS 动画来实现门打开后展示灯笼自上而下的动画效果。具体步骤如下：
1. 在 HTML 中创建门和灯笼的元素，并给这些元素添加类名。例如：
<div class="door">门</div>
<div class="lantern">灯笼</div>
2. 在 CSS 中为门添加打开的样式。例如，可以使用 transform 属性来旋转门：
.door {
transform: rotate(90deg)
}
3. 为灯笼添加动画样式。可以使用 CSS 的 animation 属性来实现动画效果。例如，可以使用以下样式来使灯笼从上方移动到下方：
.lantern {
animation: moveDown 1s ease-in-out
}
@keyframes moveDown {
from {
top: -100px
}
to {
top: 100px
}
}
4. 使用 JavaScript 来控制动画的播放。可以在门打开后调用灯笼元素的 classList.add 方法，来添加动画类名，从而触发动画的播放。
例如：
document.querySelector('.door').addEventListener('click', function() {
document.querySelector('.lantern').classList.add('lantern-animation')
})
希望这些信息能帮助到您！
你是要横着的导航条式的，还是竖着的目录式的呢？$(".leftsc>ul>li").hover(function(){
$(this).find("ul").show()
},function(){
$(this).find("ul").hide()
})
剩下的就是你的css样式布局了。。你也可以通过加class,设置class的属性display:block；默认子层的ul的disaplay:none可以用hover效果也可以用click来切换class.
