                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /導(dǎo)航條菜單的制作

使用transition是不能讓a標(biāo)簽伸長(zhǎng)之后進(jìn)行動(dòng)畫縮短的吧？

<!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=utf-8"?/>
<title>導(dǎo)航菜單</title>
<style?type="text/css">
*?{?margin:?0;?padding:?0;?font-size:?14px;?}
a?{?color:?#333;?text-decoration:?none?}
ul?{?list-style:?none;?height:?30px;?border-bottom:?5px?solid?#F60;?margin-top:?20px;?padding-left:?50px;?}
ul?li?{?float:?left?}
ul?li?a?{?display:?block;?height:?30px;?text-align:?center;?line-height:?30px;?width:120px;?background:?#efefef;?margin-left:?1px;?}
a.on,?a:hover?{?background:?#F60;?color:?#fff;?}
a:hover{width:160px;transition:all?0.5s?ease-in??1s;}
</style>

</head>
<body>
<ul>
????<li><a?class="on"?href="#">首　　頁</a></li>
????<li><a?href="#">新聞快訊</a></li>
<li><a?href="#">產(chǎn)品展示</a></li>
????<li><a?href="#">售后服務(wù)</a></li>
????<li><a?href="#">聯(lián)系我們</a></li>
</ul>
</body>
</html>