CSS3 Making Stereo Navigation

<ulclass= "NAV">    <Li><ahref="">Home</a></Li>    <Li><ahref="">About Us</a></Li>    <Li><ahref="">Show</a></Li>    <Li><ahref="">Management</a></Li>    <Li><ahref="">Culture</a></Li>    <Li><ahref="">Contact Us</a></Li></ul>

1 <style>2 Body{3 background:#ebebeb;4}5 . Nav{6 width:450px;7 Height:50px;8 Font:Bold 0/50px Arial;9 margin:40px Auto 0;Ten background:#3fbeff; One Border-radius:5px; A Box-shadow:0 4px #04a7fa;/*Shadows*/ -} -  the . Nav a{ - Display:Inline-block; - -webkit-transition:All 0.2s ease-in; - -moz-transition:All 0.2s ease-in; + -o-transition:All 0.2s ease-in; - -ms-transition:All 0.2s ease-in; + transition:All 0.2s ease-in;/*duration 0.2s, delay time 0.5s, fade effect ease-in*/ A} at . Nav a:hover{ - -webkit-transform:Rotate (10deg); - -moz-transform:Rotate (10deg); - -o-transform:Rotate (10deg); - -ms-transform:Rotate (10deg); - Transform:Rotate (10deg);/*When you move the mouse, rotate it 10 degrees clockwise.*/ in} -  to . Nav Li{ + position:relative; - Display:Inline-block; the padding:0 16px; * font-size:12px; $ Text-shadow:1px 2px 4px rgba (0,0,0,.5);/*text Shadow, 0.5 transparent*/Panax Notoginseng List-style:None outside None; -} the  + . Nav Li{ A background:linear-gradient (to bottom, #04a7fa, #0599e4, #0488cb) no-repeat right/1px 15px; the}/*a small line on the right*/ +  - . Nav li:last-child{background:None;}/*Delete the last split line of a pseudo-element*/ $  $ . Nav A, - . Nav a:hover{ - Color:#fff; the text-decoration:None; -}Wuyi </style>

：

CSS3 Making Stereo Navigation