１ 「文章」のコンテンツを追加します。
２ 「番号なしリスト」をクリック
３ メニューにしたい文字をメニューごとに改行しながら入力します。
４ HTML編集を押し、変種画面を表示させます。
５ ul にClassを設定します。
EX)「<ul>」→ 「<ul class="item-sub-cate">」
６ 保存を押し、編集画面を閉じます。
７ 管理メニュー＞基本設定＞ヘッダーの編集と進み、CSSを設定します。
８ 編集後 保存を押します。
今回は、 liに色つけ＆枠をするのではなく、リンク（aタグ）に色つけ＆枠をつけています。
<style type="text/css">
/*<![CDATA[*/
ul.item-sub-cate{
display: table;
table-layout: fixed;
text-align: center;
width: 70%; /*メニューを表示させる横幅 */
list-style-type: none
}
ul.item-sub-cate li {
display:inline-block;
vertical-align: middle;
height:50px; /* ボタンの高さ */
}
ul.item-sub-cate li a{
text-decoration: none;
padding:10px 10px; /* 内側の余白 */
margin:10px; /* 外側の余白 */
background-color:#90EE90; /*背景色 */
border:1px solid #000000;
border-radius: 5px; /* 丸角の大きさ指定 */
-webkit-border-radius: 5px; /* Safari,Google Chrome用丸角の指定 */
-moz-border-radius: 5px;
}
ul.item-sub-cate li a:hover{
background-color:#CCFFCC; /*マウスを載せたの時の背景食 */
}
/*]]>*/
</style>
