css - 如何通过 codrops 在创意 css3 动画菜单上添加子菜单

Question

我正在使用 CODROPS的Creative CSS3动画菜单，可以在这里看到演示。这是我尝试将箭头放在子菜单中的代码

这是css代码

@font-face {
 font-family: 'WebSymbolsRegular';
 src: url('websymbols/websymbols-regular-webfont.eot');
 src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('websymbols/websymbols-regular-webfont.woff') format('woff'),
    url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
    url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ca-menu{
 padding:0;
 margin:5px auto;
 width: 145px;
}
.ca-menu li{
 width: auto;
 height: 50px;
 overflow: hidden;
 position: relative;
 display: block;
 background: #fff;
 -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
 margin-bottom: 4px;
 -webkit-transition: all 300ms ease-in-out;
 -moz-transition: all 300ms ease-in-out;
 -o-transition: all 300ms ease-in-out;
 -ms-transition: all 300ms ease-in-out;
 transition: all 300ms ease-in-out;
}
.ca-menu li:last-child{
 margin-bottom: 0px;
}
.ca-menu li a{
 text-align: left;
 width: 100%;
 height: 100%;
 display: block;
 color: #333;
 position: relative;
}

.ca-icon{
 font-family: 'WebSymbolsRegular', cursive;
 font-size: 20px;
 color: #333;
 text-shadow: 0px 0px 1px #333;
 line-height: 25px;
 position: absolute;
 width: 9px;
 left: 2px;
 text-align: center;
 -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear; 
}
.ca-content{
 position: absolute;
 left: 30px;
 width: 370px;
 height: 60px;
 top: 5px;
}
.ca-main{
 line-height: 25px;
 font-size: 15px;
 -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear; 
}
.ca-sub{
 font-size: 14px;
 color: #666;
}
.ca-menu li:hover{
 background-color: #000;
}
.ca-menu li:hover .ca-icon{
 color: #f900b0;
 font-size: 120px;
 opacity: 0.2;
 left: -20px;
 -webkit-transform: rotate(20deg);
 -moz-transform: rotate(20deg);
 -ms-transform: rotate(20deg);
 transform: rotate(20deg);
}
.ca-menu li:hover .ca-main{
 color: #f900b0;
 opacity: 0.8;
}
.ca-menu li:hover .ca-sub{
 color: #fff;
 opacity: 0.8;
}
/** Here I add arrow **/
.has-sub>a::after {    
        content: '';
        position: absolute;
        top: 20px;
        right: 5px;
        width: 0px;
        height: 0px;

        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #333; 
}
ul li:hover>a::after {
        border-left: 4px solid #f900b0;
}

HTML 代码

             <ul class="ca-menu">
                <li>
                    <a href="pagehome.php">
                        <span class="ca-icon">D</span>
                        <div class="ca-content">
                            <h2 class="ca-main">Halaman Utama</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="addpage.php">
                        <span class="ca-icon">F</span>
                        <div class="ca-content">
                            <h2 class="ca-main">Borang Baru</h2>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="searchpage.php">
                        <span class="ca-icon">L</span>
                        <div class="ca-content">
                            <h2 class="ca-main">Carian Borang</h2>
                        </div>
                    </a>
                </li>
                <li class='has-sub'>
                    <a href="settingpage.php">
                        <span class="ca-icon">S</span>
                        <div class="ca-content">
                            <h2 class="ca-main">Tetapan</h2>
                        </div>
                    </a>
                            <ul>
                                <li>
                                    <a href="settingpage.php">
                                <span class="ca-icon">S</span>
                                <div class="ca-content">
                                    <h2 class="ca-main">Tetapan</h2>
                                </div>
                                    </a>
                                </li>
                            </ul>    
                </li>
                <li>
                    <a href="out.php" onClick="return confirm('Anda pasti untuk keluar dari sistem ?');">
                        <span class="ca-icon">X</span>
                        <div class="ca-content">
                            <h2 class="ca-main">Keluar</h2>
                        </div>
                    </a>
                </li>
            </ul>