利用css写的中英文切换的导航栏菜单

导航栏目的菜单主要用到的就是display:none/block,:hover 这两个属性，结合背景颜色、高度的变换，来实现导航栏的多种变换。

css代码

       *{
            margin:0;
            padding:0;
        }
        a{
            text-decoration: none;
        }
        em{
            font-style:normal;
        }
        li{
            list-style:none;
        }
        ul{
            600px;
            height:50px;
            background: chocolate;
            margin:100px auto;
            border-bottom:5px solid skyblue;
        }
        li{
            float:left;
            position: relative;
        }
        li a{
            display: block;
            100px;
            height: 45px;
            line-height: 45px;;
            background: black;
            color: blanchedalmond;
            text-align: center;
            border-right: 2px solid yellow;
            border-left:2px solid red;
            padding:0 8px;
            margin-top:5px;
        }
        li a em{
            display:none;
        }
        li a:hover span{
            display: none;
        }
        li a:hover em{
            display: block;
        }
        li a:hover{
            color:black;
            background: blanchedalmond;
            height: 50px;
            margin-top:0px;
        }

　　html代码

 <ul>
        <li>
            <a href="#">
                <span>首页</span>
                <em>home</em>
            </a>
        </li>
        <li>
            <a href="#">
                <span>首页</span>
                <em>home</em>
            </a>
        </li>
        <li>
            <a href="#">
                <span>首页</span>
                <em>home</em>
            </a>
        </li>
        <li>
            <a href="#">
                <span>首页</span>
                <em>home</em>
            </a>
        </li>
        <li>
            <a href="#">
                <span>首页</span>
                <em>home</em>
            </a>
        </li>
    </ul>