[HTML]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<meta http-equiv="Content-Style-Type" content="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="pulldown2.css" media="all" / >
<title></title>
</head>

<body>
<div id="menu">
<ul class="main">
<li class="off"onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="#">あああああ</a>
<ol class="sub">
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><a href="#">１１１１１</a></li>
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><a href="#">２２２２２</a></li>
</ol>
</li>

<li class="off"onmouseover="this.className='on' "onmouseout="this.className='off'"><a href="#">いいいいい</a>
<ol class="sub">
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><a href="#">３３３３３</a>
<ul class="sub-2">
<li><a href="#">サンプル１</a></li>
<li><a href="#">サンプル２</a></li>
<li><a href="#">サンプル３</a></li>
</ul>
</li>
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><a href="#">４４４４４</a>
<ul class="sub-2">
<li><a href="#">サンプル４</a></li>
<li><a href="#">サンプル５</a></li>
<li><a href="#">サンプル６</a></li>
</ul>
</li>
<li class="off2" onmouseover="this.className='on2'" onmouseout="this.className='off2'"><a href="#">５５５５５</a>
<ul class="sub-2">
<li><a href="#">サンプル７</a></li>
<li><a href="#">サンプル８</a></li>
<li><a href="#">サンプル９</a></li>
</ul>
</li>
</ol>
</li>

</ul>
</div>

</body>
</html>

[CSS]

/*****************************ブロック要素の設定**********************************/
div#menu{
width: 100%;
position: absolute;
z-index: 100;
}

/*****************************メインメニュー部分の設定**********************************/
.main *{
margin: 0px;
padding: 0px;
list-style: none;
display: block;
}

.main a{
text-decoration: none;
padding: 2px;
border-bottom: 1px solid #000000;
}

.main li.off{
height: 19px;
width: 120px;
border: 1px solid #000000;
}

.main li.on{
width: 120px;
border: 1px solid #000000;
border-bottom: 0px;
}

ul.main{
font-size: 14px;
text-align: center;
position: relative;
width: 366px;
}

ul.main li.off{
position: relative;
float: left;
overflow: hidden;
}

ul.main li.on{
float: left;
overflow: hidden;
}

ul.main>li.on{
overflow: visible;
}

/*****************************プルダウンメニュー部分の設定**********************************/

.sub li{
background-color: #ffaaaa;
}

.sub a{
padding: 2px 5px;
width: 110px;
height: 14px;
}

.sub li.on2{
background-color: #ffffff;
}

ol.sub{
text-align: left;
left: 0;
top: 0;
width: 120px;
position: relative;
}

ol.sub li.off2{
width: 120px;
height: 18px;
border-bottom: 1px solid #000000;
position: relative;
overflow: hidden;
}

ol.sub li.on2{
width: 120px;
height: 18px;
border-bottom: 1px solid #000000;
overflow: hidden;
}

ol.sub>li.on2{
overflow: visible;
}

/*****************************サブメニュー部分の設定**********************************/

.sub-2{
background-color: #ccccff;
}

.sub-2 li{
background-color: #ccccff;
}

.sub-2 a{
border-bottom: 1px solid #000000;
padding: 3px 5px;
}

.sub-2 a:link{
color: #0000ff;
}

.sub-2 a:visited{
color: #000000;
}

.sub-2 a:hover{
background-color: #ecffff;
color: #ff0000;
}

ul.sub-2{
text-align: left;
left: 100%;
top: -20px;
width: 120px;
border: 1px solid #000000;
border-bottom: 0px;
position: relative;
}

inserted by FC2 system