1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title></title>6 <style>7 ul{8 List-style:None;9 }Ten . Tab{ One width:100px; A Height:200px; - float: Left; - background:Deepskyblue; the Border-right:1px Solid Gold; - transition:. 7s ease 0s; - } - . Tab.active{ + width:400px; - background:LightBlue; + transition:. 7s ease 0s; A } at </style> - </Head> - <Body> - <ulID= "Slidemenu"> - <Liclass= "tab Active">1</Li> - <Liclass= "tab">2</Li> in <Liclass= "tab">3</Li> - <Liclass= "tab">4</Li> to <Liclass= "tab">5</Li> + </ul> - <Scriptsrc= "Jquery-1.11.2.js"></Script> the <Script> * $("#slideMenu"). Find (". Tab"). MouseOver (function(){ $ $("#slideMenu"). Find (". Tab"). Removeclass ("Active");Panax Notoginseng $( This). addclass ("Active"); - }); the </Script> + A </Body> the </HTML>
View Demo
The simplest CSS3 implements the accordion effect of the horizontal navigation bar