CSS3 天子グリッドリストのスタイルの書き方

<スタイル>
        ul li{ リストスタイル: なし;}
        .mp-リスト{   
            位置: 相対的;
            オーバーフロー: 非表示;
            zインデックス: 0;
            背景色: #fff;
        }        
        .mp-list:before {
            コンテンツ： '';
            位置: 絶対;
            幅: 33.33%;
            左: 33.33%;
            高さ: 100%;
            左境界線: .02rem 実線 #ddd;
            右境界線: .02rem 実線 #ddd;
        }
        .mp-リスト li {
            幅: 33.33%;
            高さ: 2rem;
            行の高さ: 2rem;
            フォントサイズ: .28rem;
            テキスト配置: 中央;
            ボーダー下部: .02rem 実線 #ddd;
            下マージン: -1px;
            フロート: 左;
            位置: 相対的;
            zインデックス: 10;
            色: #212121;
        }
        .mp-list li a {
            色: #212121;
            表示: ブロック;
            オーバーフロー: 非表示;
            テキストオーバーフロー: 省略記号;
            空白: ラップなし;
            フォントサイズ: .28rem;
        }
    </スタイル>

<ul class="mp-list">
    <li><a hybrid-link="" href="" title="">香港</a></li>
    <li><a hybrid-link="" href="" title="">マカオ</a></li>
    <li><a hybrid-link="" href="" title="">台湾</a></li>
    <li><a hybrid-link="" href="" title="">バンコク</a></li>
    <li><a hybrid-link="" href="" title="">シンガポール</a></li>
    <li><a hybrid-link="" href="" title="">ソウル</a></li>
    <li><a hybrid-link="" href="" title="">東京</a></li>
    <li><a hybrid-link="" href="" title="">済州島</a></li>
    <li><a hybrid-link="" href="" title="">パタヤ</a></li>
</ul>

.mp-list:after {
    コンテンツ： '';
    位置: 絶対;
    幅: 10%;
    左: 75%;
    高さ: 100%;
    左境界線: .02rem 実線 #ddd;
    右境界線: 0;
}