ニワデザイン　CSS講座

HTML

<div id="gnavi02">
<ul 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>
</div>

スタイルシート

#gnavi02 a {
color: #FFF;
}

#gnavi02 ul {
background: #34BEED;
list-style-type: none;
border-bottom: 5px solid #CCC;
}

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

#gnavi02 ul li a {
display: block;
padding: 2px 10px;
text-decoration: none;
border-right: 1px solid #FFF;
}

#gnavi02 ul li a:hover {
background: #18B2E6;
}

.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 */