スタイルシートによるメニューのデザイン

• MENU１
• MENU２
• MENU３
• MENU４

HTMLソース↓
<ul class="sample1">
<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↓
ul.sample1 {
list-style-type: none;
width: 320px;
height: 30px;
margin: 0px;
text-align: center;
}
ul.sample1 li {
width: 70px;
float: left;
margin: 0px;
background-color: #efefef;
}
ul.sample1 li a {
display: block;
font-size: 12px;
color: #FFFFFF;
background-color: #5E5D5D;
border-bottom: 10px solid #878787;
width: 70px;
padding: 5px;
text-decoration: none;
}
ul.sample1 li a:hover {
color: #00BFE5;
border-bottom: 10px solid #00BFE5;
width: 70px;
padding: 5px;
}

• MENU１
• MENU２
• MENU３
• MENU４

HTMLソース↓
<ul class="sample2">
<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↓
ul.sample2 {
list-style-type: none;
}
ul.sample2 li {
display: inline;
}
.sample2 li a {
display: block;
font-size: 13px;
color: #FFFFFF;
background-color: #004466;
width: 130px;
padding: 10px;
border-left: 10px solid #749E06;
border-right: 60px solid #FBCE02;
text-decoration: none;
}
.sample2 li a:hover {
border-left: 60px solid #749E06;
border-right: 10px solid #FBCE02;
width: 130px;
text-align: right;
}

• MENU１
• MENU２
• MENU３
• MENU４

HTMLソース↓
<ul class="sample3">
<li><a href="#">MENU１</a></li>
<li><a href="#" class="other">MENU２</a></li>
<li><a href="#">MENU３</a></li>
<li><a href="#" class="other">MENU４</a></li>
</ul>

CSS↓
ul.sample3 {
list-style-type: none;
width: 200px;
}
ul.sample3 li {
font-size: 13px;
color: #004466;
margin: 0px;
display: inline;
}
ul.sample3 li a {
font-size: 13px;
color: #004466;
background-color: #A6DDCB;
padding: 10px 10px 10px 35px;
margin: 0px;
text-decoration: none;
display: block;
text-align: right;
}
ul.sample3 li a:hover {
width: 230px;
color: #FF6600;
padding: 10px 10px 10px 35px;
text-decoration: underline;
}
ul.sample3 li a.other {
background-color: #F5FDD4;
}
ul.sample3 li a:hover.other {
color: #FF6600;
text-decoration: underline;
}

• MENU１
• MENU２
• MENU３
• MENU４

HTMLソース↓
<ul class="sample4">
<li><a href="#">MENU１</a></li>
<li><a href="#" class="blue">MENU２</a></li>
<li><a href="#">MENU３</a></li>
<li><a href="#" class="blue">MENU４</a></li>
</ul>

CSS↓
ul.sample4 {
list-style-type: none;
width: 200px;
}
ul.sample4 li a {
font-size: 13px;
color: #004466;
border-bottom: 1px dashed #878787;
background-color: #E1DCBF;
text-decoration: none;
padding: 10px 10px 10px 35px;
margin: 0px;
display: block;
}
ul.sample4 li a:hover {
color: #FF6600;
border-left: 15px solid #FF6600;
padding: 10px 10px 10px 20px;
}
ul.sample4 li a.blue {
color: #004466;
border-bottom: 1px dashed #878787;
text-decoration: none;
padding: 10px 10px 10px 35px;
margin: 0px;
display: block;
background-color:#DEEFF9;
}
ul.sample4 li a:hover.blue {
color: #FC3063;
border-left: 15px solid #FC3063;
padding: 10px 10px 10px 20px;
}