JSFiddle # http://jsfiddle.net/UqyAq/
html -
<nav>
<ul>
<li>Button 1</li>
<li>Button 2
<ul>
<li>Sub-Button 1</li>
<li>Sub-Button 2</li>
<li>Sub-Button 3</li>
</ul>
</li>
<li>Button 3</li>
<li>Button 4</li>
<li>Button 5</li>
</ul>
</nav>
CSS -
* {
margin: 0;
padding: 0;
}
nav {
height: 100%; width: 18%;
position: absolute;
}
nav ul {
list-style-type: none;
font-family: 'Universal Accreditation', Serif;
font-size: 18pt;
letter-spacing: 1px;
font-variant: small-caps;
color: black;
}
nav ul ul {
display: none;
}
nav ul li {
display: block;
}
nav ul li:hover ul {
display: block;
}
基本上,您正在查看一个简单的无序列表下拉菜单。我试图弄清楚我需要使用什么来对第二层的下拉产生缓和效果。将鼠标悬停在“按钮 2”上会调出子菜单。
注意它是如何单跳运动的。我将如何减慢它?也许看起来子菜单从“按钮 2”下方滑出?
我应该使用javascript还是css?