CSS3 example code sharing for implementing a horizontal scrolling menu button

Today for everyone to share based on the CSS3 implementation of beautiful Horizontal scrolling menu button, very good, with reference value, need to refer to the friend

Nonsense not much to say, direct:

Then the code:

<! DOCTYPE html>
Css:

<style>        Ul{list-style:none;}        UL Li a{            display:block;            width:40px;            height:40px;             Background:rgb (208,165,37);             margin-top:10px;             Text-decoration:none;             line-height:40px;             position:relative;            }        UL Li a span{            width:0;             height:40px;            Display:block;            Visibility:hidden;            Overflow:hidden;            Font-weight:bold;            Position:absolute;            left:40px;            Transition:all 0.3s;            }        UL Li A1 span{background:rgb (30,139,180);}        UL Li A2 Span{background:rgb (125,163,23);}        UL Li A3 span{background:rgb (175,30,131);}        UL Li A:hover span{visibility:visible; width:auto; padding:0 20px;}    </style>
In order to facilitate reading, especially optimized code, mainly related to:

CSS3 Animation (transtion)

Element's hiding (overflow/visibility)