リストなんだけどボタンっぽく見えるスタイルシートとHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<title></title>
<style type="text/css">
body{
/* text-align:center; */
}
.menu{
background-color: #cccccc;
width: 100px;
}
a{
text-decoration: none;
color: #333;
}
ul{
list-style: none none outside;
margin:0px;
padding:0px;
}
.menu li {
background-color: transparent;
padding: 0;
margin: 0;
}
.menu li a {
display: block;
padding: 0 0 0 10px;
border: solid 1px;
border-color: #ccc #666 #333 #aaa;
}
.menu li a:hover{
color: #000;
background-color: #aaa;
}
.menu li a:active{
color: #933;
background-color: #caa;
border: solid 1px;
border-color: #333 #aaa #ccc #666;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
<li><a href="#">aaa</a></li>
</ul>
</body>
</html>
a要素をブロックレベルにするのとリストのレイアウト調整が肝です。
簡単かなと思っていたら以外と面倒でした。