[スタイルシート]

.waku{/*ピンクの枠*/
width: 120px;
height: 20px;
text-align: center;
padding-top: 6px;
border:3px #ffb8e0 double;
}
.position{
position:relative;/*忘れないように*/
}
#menu a {
color: #555555;
}
#menu a:hover {
color: #b7282e;
}

#menu{
width: auto;
height: auto;
clear: both;
}
#menu li{
list-style: none;
float: none;
width: auto;
height: auto;
position:absolute;
}
#menu li#botan1{
top: 330px;
left: 180px;
}
#menu li#botan2{
top: 360px;
left: 410px;
}
#menu li#botan3{
top: 420px;
left: 224px;
}
#menu li#botan4{
top: 420px;
left: 350px;
}
#menu li#botan5{
top: 470px;
left: 150px;
}
#menu li#botan6{
top: 490px;
left: 350px;
width: 210px;
height: 70px;
border: 1px solid #999999;
padding-left: 10px;
padding-top: 10px;
}

[ｂｏｄｙの中]

<div id="wrapper" class="position">
<div id="container">
<div id="main">
<ul id="menu" title="メインメニュー">
<li id="botan1">
<a href="sample/sample1.html" title="sample1">
<img src="img/sample1.JPG" alt="ピンク" height="40" width="200" /></a>
</li>
<li id="botan2">
<div class="waku">
<a href="sample/sample2.html" title="sample2"> ピンク</a>
</div>
</li>
</li>
<li id="botan3">
<div class="waku">
<a href="sample/sample3.html" title="sample4"> ピンク</a>
</div>
</li>
<li id="botan4">
<a href="sample/sample4.html" title="sample3">
<img src="img/sample1.JPG" alt="ピンク" height="30" width="120" /> </a>
</li>
<li id="botan5">
<img src="img/sample5.JPG" alt="サンプル画像" height="180" width="120" />
</li>
<li id="botan6">
[サンプル]
テキストを入力します。
</li>
</ul>
</div>
</div>
</div>