css3做了一个卷轴样式的菜单

来源：互联网发布：企业淘宝开店流程编辑：程序博客网时间：2024/05/01 11:22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link href="css/base.css" rel="stylesheet" type="text/css"/><title>无标题文档</title></head><style>a{text-decoration:none;}#nav{position:fixed; left:0px; top:200px;}.nav_list{height:58px; position:relative; margin-top:10px; -moz-box-shadow:3px 3px #123456;  width:14px; -webkit-transition:width 1s linear; -moz-transition:width 1s linear;}.border{ height:58px; width:7px; background:url(img/bian.jpg) no-repeat; float:left; -webkit-box-shadow:3px 3px 3px grey; -moz-box-shadow:3px 3px 3px grey;}.nav_list ul{background:url(img/di.jpg) repeat-x; height:46px; float:left; margin-top:6px; overflow:hidden; width:0px; -webkit-transition:width 1s linear;  -moz-transition:width 1s linear; -webkit-box-shadow:3px 3px 3px grey; -moz-box-shadow:3px 3px 3px grey;}.nav_list:hover ul{ width:500px;}.nav_list:hover{width:514px;}.nav_list li{list-style-type:none; float:left; padding:0 20px; line-height:46px;}.wrapper{width:1000px;height:400px;background-color:#666666; margin-top:20px;}</style><body>    <div id="nav">        <div class="nav_list">            <div class="border"></div>            <ul>                <li><a href="">aaa</a></li>                <li><a href="">aaa</a></li>                <li><a href="">aaa</a></li>                <li><a href="">aaa</a></li>            </ul>            <div class="border"></div>        </div>        <div class="nav_list">            <div class="border"></div>            <ul>                <li><a href="">bbb</a></li>                <li><a href="">bbb</a></li>                <li><a href="">bbb</a></li>            </ul>            <div class="border"></div>        </div>        <div class="nav_list">            <div class="border"></div>            <ul>                <li><a href="">ccc</a></li>                <li><a href="">ccc</a></li>                <li><a href="">ccc</a></li>                <li><a href="">ccc</a></li>                <li><a href="">ccc</a></li>            </ul>            <div class="border"></div>        </div>        <div class="nav_list">            <div class="border"></div>            <ul>                <li><a href="">ddd</a></li>                <li><a href="">ddd</a></li>                <li><a href="">ddd</a></li>                <li><a href="">ddd</a></li>            </ul>            <div class="border"></div>        </div>        <div class="nav_list">            <div class="border"></div>            <ul>                <li><a href="">eee</a></li>                <li><a href="">eee</a></li>                <li><a href="">eee</a></li>                <li><a href="">eee</a></li>            </ul>            <div class="border"></div>        </div>    </div>    <div class="layc wrapper">            </div>    <div class="layc wrapper">            </div></body></html>
其中base.css文件包括的是一些reset等等。
webkit下效果最佳，效果类似这样：