Edit in JSRUN


            
<nav>
    <ul>
        <li><a href="javascript:void(0)">华语歌曲</a>
            <span></span>
            <ul>
                <li><a href="javascript:void(0)">梦醒时分-陈淑桦</a></li>
                <li><a href="javascript:void(0)">为你我受冷风吹-林忆莲</a></li>
                <li><a href="javascript:void(0)">山丘-李宗盛</a></li>
                <li><a href="javascript:void(0)">写给自己的歌-李宗盛</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0)">欧美歌曲</a>
            <span></span>
            <ul>
                <li><a href="javascript:void(0)">Hotel California-Eagles</a></li>
                <li><a href="javascript:void(0)">Hey Jude-The Beatles</a></li>
                <li><a href="javascript:void(0)" title="Knockin' On Heaven's Door-Bob Dylan">Knockin' On Heaven's Door-Bob Dylan</a></li>
            </ul>
        </li>
        <li><a href="javascript:void(0)">粤语歌曲</a>
            <span></span>
            <ul>
                <li><a href="javascript:void(0)">海阔天空-Beyond</a></li>
                <li><a href="javascript:void(0)">遥远的她-张学友</a></li>
                <li><a href="javascript:void(0)">风继续吹-张国荣</a></li>
                <li><a href="javascript:void(0)">讲不出再见-谭咏麟</a></li>
            </ul>
        </li>
    </ul>
</nav>
* {
            padding: 0;
            margin: 0;
        }

        body {
            font-size: 14px;
            box-sizing: border-box;
          background-color: #fff;

        }

        nav {
            float: left;
            width: 280px;
            height: 100%;
            border: 1px solid #ccc;
        }

        ul li {
            list-style: none;
            border-bottom: 1px solid #ccc;
            padding-top: 10px;
            padding-bottom: 10px;
            text-indent: 2em;
        }

        ul li:first-of-type {
            border-top: 1px solid #ccc;
        }

        ul li:last-child {
            border: none;
        }

        ul > li {
            position: relative;
        }

        ul li a {
            display: block;
            width: 280px;
            color: #666;
            text-decoration: none;
            word-break: keep-all; /* 不换行 */
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
            text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与overflow:hidden;一起使用。*/
        }

        ul > li > a + span {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: -1;
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #fff;
            border: 3px solid #ccc;
            border-top-color: transparent;
            border-right-color: transparent;
            transform: rotate(-45deg);
            transform-origin: 3px 7px;
            transition: transform 1s;
        }

        ul > li > ul {
            display: none;
        }

        ul > li > ul > li {
            text-indent: 4em;
        }

        ul > li > ul > li:last-child {
            padding-bottom: 0;
        }

        ul > li:hover > ul {
            display: block;
            margin-top: 10px;
        }

        ul > li:hover > a + span {
            transform: rotate(135deg);
        }