-----------------------------------------------------------------------------------------------
CSS(◯◯◯.css)
-----------------------------------------------------------------------------------------------CSS(◯◯◯.css)
#nave{
width: 200px;
}
#nave ul {
list-style: none;
margin: 0;
padding: 0px 0px;
border-top: 1px dotted #999999;
}
#nave li {
background:#efefef;
margin: 0;
padding: 1px 1px;
border-bottom: 1px dotted #999999;
}
#nave a {
border-left: 8px solid #000099;/*文字の横に付箋のようなマークを入れる*/
padding:7px 10px;
display: block;
width: 171px ;
color: #333333;
text-decoration: none;
}
#nave a:hover {
background: #cccccc;
border-left: 8px solid #FFcc33;/*カーソルオーバーでマークの色が変わる*/
color: #111111;
width: 171px ;
}
-----------------------------------------------------------------------------------------------
HTML
-----------------------------------------------------------------------------------------------
<html>
<head>
<title>menu button</title>
<LINK href="◯◯◯.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="nave">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">問い合わせ</a></li>
</ul>
</div>
</body>
</html>
