付箋風ナビゲーション

見た目にも爽やかであっさりのナビゲーション。

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; }

#Navigation ul
{
width: 158px;
margin: 0;
padding: 0;
border: 1px solid #808080;
border-top: 0px;
font: bold 12px "Tahoma", "MS UI Gothic","OSAKA";
background: #808080;
}

#nav li
{
list-style: none;
margin: 0px;
border: 0px;
border-top: 1px solid #808080;
}

#nav li a
{
display: block;
width: 100%;
padding: 6px 8px;
border: 0px;
border-left: 20px solid #ffcc00;
background: #ffffff;
text-decoration: none;
text-align: right;
}

html>body #nav li a { width: auto; }

#nav li a:link { color: #777777; }
#nav li a:visited { color: #777777; }

#nav li a:hover
{
border-color: #ff6600;
color: #666666;
background: #eeeeee;
}