とっぷ
ウェブロ
うぃき
しゃっしーん
お買い物
ぬーす！
あんてな
Here is the HTML for this list:
<div id="navcontainer"> <ul id="navlist"> <li><a href="http://www.preston-net.com/" title="preston-net">とっぷ</a></li> <li><a href="http://kengo.preston-net.com/" title="blog">ウェブロ</a></li> <li><a href="http://www.preston-net.com/wiki/" title="wiki">うぃき</a></li> <li><a href="http://www.preston-net.com/futurephoto/index.shtml" title="photo">しゃっしーん</a></li> <li><a href="http://www.preston-net.com/shopping/index.shtml" title="shop">お買い物</a></li> <li><a href="http://www.preston-net.com/news/rss/recent_entry.html" title="news">ぬーす！</a></li> <li><a href="http://www.preston-net.com/antenna/rss/recent_entry.html" title="RSS Antenna">あんてな</a></li> </ul> </div>
Here is the CSS for this list:
#navcontainer { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; background-color: #90bade; color: #333; } #navcontainer ul { list-style: none; margin: 0; padding: 0; border: none; } #navcontainer li { border-bottom: 1px solid #90bade; margin: 0; } #navcontainer li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #navcontainer li a { width: auto; } #navcontainer li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }