無料テンプレート配布

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-position: inside; margin: 0 0 2em; } .cds-navi li { margin: 0 0 0.5em; } .cds-navi li a { text-decoration: none; } .cds-navi li a:hover { text-decoration: underline; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a> <ul> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> </ul> </li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-position: inside; margin: 0 0 2em; } .cds-navi ul { list-style-position: inside; margin: 0.5em 0 1em 1em; } .cds-navi li, .cds-navi ul li { margin: 0 0 0.5em; } .cds-navi li a, .cds-navi ul li a { text-decoration: none; } .cds-navi li a:hover, .cds-navi ul li a:hover { text-decoration: underline; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-position: inside; margin: 0 0 2em; } .cds-navi li { margin: 0; padding: 5px 0 4px; border-bottom: 1px solid #000000; } .cds-navi li a { text-decoration: none; } .cds-navi li a:hover { text-decoration: underline; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a> <ul> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> </ul> </li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-position: inside; margin: 0 0 2em; } .cds-navi ul { list-style-position: inside; margin: 5px 0 0; } .cds-navi li { margin: 0; padding: 5px 0 4px; border-bottom: 1px solid #000000; } .cds-navi ul li { margin: 0; padding: 4px 0 5px 1em; border-top: 1px solid #999999; border-bottom: none; } .cds-navi li a, .cds-navi ul li a { text-decoration: none; } .cds-navi li a:hover, .cds-navi ul li a:hover { text-decoration: underline; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-type: none; margin: 0 0 2em; } .cds-navi li { margin: 0; border-bottom: 1px solid #ffffff; } .cds-navi li a { text-align: center; margin: 0; padding: 0.5em 0; width: 100%; display: block; background-color: #000000; color: #ffffff; text-decoration: none; } .cds-navi li a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a> <ul> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> </ul> </li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi, .cds-navi ul { list-style-type: none; } .cds-navi { margin: 0 0 2em; } .cds-navi ul { margin: 1px 0 0; } .cds-navi li { margin-bottom: 1px; } .cds-navi li a, .cds-navi ul li a { text-align: center; padding: 0.5em 0; width: 100%; display: block; text-decoration: none; } .cds-navi a { background-color: #000000; color: #ffffff; } .cds-navi ul a { background-color: #666666; color: #000000; } .cds-navi a:hover, .cds-navi ul a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-type: none; margin: 0 0 2em; } .cds-navi li { margin:0; border-bottom: 1px solid #ffffff; } .cds-navi li a { padding: 0.5em 10px; width: 160px; display: block; background-color: #000000; color: #ffffff; text-decoration: none; } .cds-navi li a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a> <ul> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> <li><a href="#">SabMENU</a></li> </ul> </li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi, .cds-navi ul { list-style-type: none; } .cds-navi { margin: 0 0 2em; } .cds-navi ul { margin: 1px 0 0; } .cds-navi li { margin-bottom: 1px; } .cds-navi li a, .cds-navi ul li a { padding: 0.5em 10px; width: 160px; display: block; text-decoration: none; } .cds-navi a { background-color: #000000; color: #ffffff; } .cds-navi ul a { background-color: #666666; color: #000000; } .cds-navi a:hover, .cds-navi ul a:hover { background-color: #ffccff; color: #ff0000; text-decoration: underline; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-type: none; margin: 0 0 2em; } .cds-navi li { margin: 0 0 1px; width: 180px; } .cds-navi li a { text-align: center; padding: 0.5em 0; width: 176px; display: block; text-decoration: none; border: 2px outset #c9c9c9; } .cds-navi li a:hover { color: #ff0000; text-decoration: underline; border: 2px inset #cccccc; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-type: none; margin: 0 0 2em; } .cds-navi li { margin: 0 0 1px; width: 180px; } .cds-navi li a { text-align: center; padding: 0.5em 0; width: 176px; display: block; text-decoration: none; border: 2px outset #c9c9c9; background-color: #000000; color: #ffffff; } .cds-navi li a:hover { text-decoration: underline; border: 2px inset #cccccc; background-color: #c9c9c9; color: #ff0000; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-type: none; margin: 0 0 2em; } .cds-navi li { margin: 0 0 1px; width: 180px; } .cds-navi li a { padding: 0.5em 10px; width: 156px; display: block; text-decoration: none; border: 2px outset #c9c9c9; } .cds-navi li a:hover { color: #ff0000; text-decoration: underline; border: 2px inset #cccccc; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-type: none; margin: 0 0 2em; } .cds-navi li { margin: 0 0 1px; width: 180px; } .cds-navi li a { padding: 0.5em 10px; width: 156px; display: block; text-decoration: none; border: 2px outset #c9c9c9; background-color: #000000; color: #ffffff; } .cds-navi li a:hover { text-decoration: underline; border: 2px inset #cccccc; background-color: #c9c9c9; color: #ff0000; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-type: none; margin: 0 0 2em; } .cds-navi li { width: 180px; margin: 0 0 0.5em; } .cds-navi li a { padding: 0.5em 0 0.5em 10px; width: 165px; text-decoration: none; border-left: 5px solid #ffffff; } .cds-navi li a:hover { color: #ff0000; text-decoration: underline; padding: 0.5em 0 0.5em 10px; width: 165px; border-left: 5px solid #ff0000; }

▲Top | 利用方法

(X)HTMLソース

<ul class="cds-navi"> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> <li><a href="#">MENU</a></li> </ul>

CSSソース

.cds-navi { list-style-type: none; margin: 0 0 2em; } .cds-navi li { width: 180px; margin: 0; } .cds-navi li a { text-decoration: none; padding: 0.5em 0; display: block; width: 100%; } .cds-navi li a:hover { color: #ff0000; text-decoration: underline; padding: 0.5em 0 0.5em 20px; width: 160px; }

▲Top | 利用方法