专注收集记录技术开发学习笔记、技术难点、解决方案
网站信息搜索 >> 请输入关键词:
您当前的位置: 首页 > HTML/CSS

【CSS3动画片】下拉菜单模拟

发布时间:2010-05-20 14:01:29 文章来源:www.iduyao.cn 采编人员:星星草
【CSS3动画】下拉菜单模拟

下拉菜单模拟效果图:

CSS3:

        <style>            #box{width:200px; height:50px; overflow:hidden; cursor: pointer; transition: all 0.35s;}            #box:hover{height:250px;}            #box ul{list-style:none; margin:0; padding:0;}            #box ul li{width:198px; height:48px; line-height: 50px; text-align: center; border:1px red solid; background:#000000; color:white;}        </style>

HTML:

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <div id="box">            <ul>                <li>This's 1</li>                <li>This's 2</li>                <li>This's 3</li>                <li>This's 4</li>                <li>This's 5</li>            </ul>        </div>    </body></html>

友情提示:
信息收集于互联网,如果您发现错误或造成侵权,请及时通知本站更正或删除,具体联系方式见页面底部联系我们,谢谢。

其他相似内容:

热门推荐: