<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>sample1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul.sub").hide();
$("ul.menu li").hover(function(){
$("ul:not(:animated)",this).slideDown("fast");
},
function(){
$("ul",this).slideUp("fast");
});
});
</script>
<style type="text/css">
*{
margin:0;
padding:0;
list-style-type:none;
}
#container{
margin:100px auto;
width:537px;
}
ul.menu li{
float:left;
width:179px;
height:48px;
background:url("images/btn.png");
position:relative;
}
ul.menu li a{
display:block;
width:100%;
height:100%;
line-height:48px;
text-indent:30px;
font-weight:bold;
color:#CFDFB5;
text-decoration:none;
}
ul.menu li a:hover{
background:url("images/btn_over.png");
}
ul.menu li ul.sub{
position:absolute;
}
ul.menu{
zoom:1;
}
ul.menu:after {
height:0;
visibility:hidden;
content:".";
display:block;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<ul class="menu">
<li><a href="#">メニューA</a>
<ul class="sub">
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a></li>
<li><a href="#">サブメニューA</a></li>
</ul>
</li>
<li><a href="#">メニューB</a>
<ul class="sub">
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a></li>
<li><a href="#">サブメニューB</a></li>
</ul>
</li>
<li><a href="#">メニューC</a>
<ul class="sub">
<li><a href="#">サブメニューC</a></li>
<li><a href="#">サブメニューC</a></li>
<li><a href="#">サブメニューC</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
最終更新：2012年05月24日 10:38
