横軸のロールオーバー・ナビゲーションバー
「width: 100%」でディスプレイの横幅いっぱいに設定したNavibar。
HTML
<div id="Navigation">
<ul id="nav">
<li id="active"><a href="#">Item number 1</a></li>
<li><a href="#">Item number 2</a></li>
<li><a href="#">Item number 3</a></li>
<li><a href="#">Item number 4</a></li>
<li><a href="#">Item number 5</a></li>
</ul>
</div>
CSS
#Navigation ul
{
padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#Navigation ul li { display: inline; }
#Navigation ul li a
{
padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#Navigation ul li a:hover
{
background-color: #369;
color: #fff;
}