怎么用css3实现侧边栏的隐藏

html-css07

怎么用css3实现侧边栏的隐藏,第1张

看你要的效果了，如果要淡入淡出的话，用display设置显示隐藏，在加个transition的过度，要左右滑动显示影藏的话，用transform或者绝对定位显示和隐藏的位子，加transition的过度

itjob为您解答：

<style>

.it{

list-style:none

}

.it li{

float:none

width:50px

height:30px

position:relative

margin-right:10px

}

.it li ul{

display:none

position:absolute

top:30px

left:0px

}

.it li a{

display:block

text-decoration:none

}

@keyframes itjob{

display:block

}

.it li a:hover ul{

animation:itjob 2s

}

</style>

html:

<div class="div1">

<ul class="it">

<li><a href="#">远标培训1</a></li>

<li>

<a>

<ul>

<li><a href="#">远标培训2</a></li>

</ul>

</a>

</li>

<li><a href="#">远标培训3</a></li>

</ul>

</div>

ul.dropdown:hover li {

    display: block

    background-color: green

}

/* 用上面这个代码覆盖你的那个代码就可以了 */