プログラムではないのですが、いいですか?
わかりやすく単純なプログラムですね。ハイハイ基本はこれです。
<ul>
<li><a href="#a1">トップページ</a></li>
<li><a href="#a2">プロフィール</a></li>
<li><a href="#a3">Contact</a></li>
</ul>
少しこりましょうか?
やっぱりプログラムではないのですが、
</head>
の上に入れてください。
<style type="text/css">
ul{padding:5px;background:#eeeeee;width:160px;}
li{list-style:none;width:160px;}
li a:link{display:block;text-decoration:none;background-color:#cccccc;border:1px solid white;height:20px;}
li a:hover{background:#feefef;border:1px solid red;}
</style>
もう少しこりましょうかね?やはりプログラムではないのですが。
先ほど<head>内にいれたものを以下に差し替えてください。
<style type="text/css">
ul{padding:5px;background:#eeeeee;width:160px;}
li{list-style:none;width:160px;}
li a:link{display:block;text-decoration:none;border:1px solid white;height:20px;background: #feffff;background: -moz-linear-gradient(top, #feffff 0%, #E0FCE0 100%, #a0d8ef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#E0FCE0), color-stop(100%,#a0d8ef));filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 );}
li a:hover{background:#feefef;border:1px solid red;}
</style>
ちょっと複雑化しましたので、このあたりで失礼します。