横軸のロールオーバー・ナビゲーション

ロールオーバーで見やすい横軸のナビゲーション。色を好きな色に変えてください。「display: inline;」で要素の後に改行が入らないようにする。 さらに「white-space: nowrap;」でディスプレイの横幅が縮んだ時に折り返さないようにしている。

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{ margin-left: 30px }

#nav
{
margin: 0;
padding: 0;
white-space: nowrap;
}

#nav li
{
display: inline;
list-style-type: none;
}

#nav a { padding: 3px 10px; }

#nav a:link, #nav a:visited
{
color: #fff;
background-color: #006;
text-decoration: none;
}

#nav a:hover
{
color: #006;
background-color: #0cf;
text-decoration: none;
}