1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "Utf-8">5 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge">6 <title></title>7 <Linkrel= "stylesheet"href="">8 <styletype= "Text/css">9 *{margin:0;padding:0;}Ten . Nav{ One Height:60px; A width:100%; - background:#5ab60d; - Clear:both; the Overflow:Hidden; - } - . Nav_box{ - width:1200px; + Height:60px; - Line-height:60px; + margin:0 Auto; A } at . Nav_box a{ - Display:Block; - width:99px; - Height:100%; - float: Left; - position:relative; in Z-index:0; - } to . Nav_box a span{ + Display:Inline-block; - position:Absolute; the Left:0px; * Top:0px; $ width:100%;Panax Notoginseng Height:100%; - Line-height:60px; the text-align:Center; + Color:#fff; A font-size:18px; the Z-index:2; + Overflow:Hidden; - } $ $ . Nav_box a:hover em{ - Top:0; - } the . Nav_box a em{ - Display:Inline-block;Wuyi Height:100%; the width:100%; - transition:All . 3s; Wu background:#4fa10b; - position:Absolute; About Top:100%; $ Left:0; - Z-index:1; - } - </style> A + </Head> the <Body> - <Divclass= "NAV"> $ <Divclass= "Nav_box"> the <ahref=""><span>Home</span><em></em></a> the <ahref=""><span>Points Mall</span><em></em></a> the <ahref=""><span>A third</span><em></em></a> the </Div> - </Div> in </Body> the </HTML>
CSS3 Navigation hover Hover effect