ニワデザイン　CSS講座

HTML

<ul id="gnavi" class="clearfix">
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
<li><a href="#">menu04</a></li>
<li><a href="#">menu05</a></li>
</ul>

スタイルシート

#gnavi {
list-style-type: none;
}

#gnavi li{
float: left;
margin: 0 1px 0 0;
}

#gnavi li a{
display: block;
padding: 3px 10px;
background: #F00;
color: #FFF;
text-decoration: none;
}

#gnavi li a:hover{
background: #F90;
text-decoration: none;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
} .clearfix {
display: block;
}
/* End hide from IE-mac */