<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MenuStyle</title>
<style type="text/css">
#TabView1, #TabView2, #TabView3, #TabView4, #TabView5 {
position:absolute;
width:100px;
height:30px;
}
#TabView2 {
margin-left:100px;
}
#TabView3 {
margin-left:200px;
}
#TabView4 {
margin-left:300px;
}
#TabView5 {
margin-left:400px;
}
#MnewTab1, #MnewTab2, #MnewTab3, #MnewTab4, #MnewTab5 {
display:none;
position:absolute;
z-index:1;
border:1px solid gray;
background-color:#FFF;
padding-right:10px;
padding-left:10px;
margin-left:-14px;
list-style:none;
}
.MenuButton {
border-bottom: dotted 1px gray;
padding-bottom:6px;
padding-top:5px;
}
.MenuButtonEnd {
padding-top:5px;
padding-bottom:8px;
}
</style>
</head>
<body>
<script type="text/javascript">
var TabView = function(obj) {
var tmp = '';
var now = obj.replace('MnewTab','');
for (var i=1;i<=5;i++) {
if(tmp != 'MnewTab'+i) TabClear('MnewTab'+i);
}
document.getElementById(obj).style.display = "block";
};
var TabClear = function(obj) {
document.getElementById(obj).style.display = "none";
};
</script>
<div id="menutop">
<ul id="menu">
<!-- menu1 -->
<li id="TabView1" onMouseover="TabView('MnewTab1')" onMouseOut="TabClear('MnewTab1')"> <a href="#" onFocus="TabView('MnewTab1')">
<div id="Mnewsbt1">Notice</div>
</a>
<ul id="MnewTab1">
<li class="MenuButton">- <a href="#">introduce</a></li>
<li class="MenuButton">- <a href="#">menu2</a></li>
<li class="MenuButton">- <a href="#">menu3</a></li>
<li class="MenuButton">- <a href="#">menu4</a></li>
<li class="MenuButtonEnd">- <a href="#">menu5</a></li>
</ul>
</li>
<!-- menu2 -->
<li id="TabView2" onMouseover="TabView('MnewTab2')" onMouseOut="TabClear('MnewTab2')"> <a href="#" onFocus="TabView('MnewTab2')">
<div id="Mnewsbt2">Newlatter</div>
</a>
<ul id="MnewTab2">
<li class="MenuButton">- <a href="#">introduce</a></li>
<li class="MenuButton">- <a href="#">menu2</a></li>
<li class="MenuButton">- <a href="#">menu3</a></li>
<li class="MenuButton">- <a href="#">menu4</a></li>
<li class="MenuButtonEnd">- <a href="#">menu5</a></li>
</ul>
</li>
<!-- menu3 -->
<li id="TabView3" onMouseover="TabView('MnewTab3')" onMouseOut="TabClear('MnewTab3')"> <a href="#" onFocus="TabView('MnewTab3')">
<div id="Mnewsbt3">Download</div>
</a>
<ul id="MnewTab3">
<li class="MenuButton">- <a href="#">introduce</a></li>
<li class="MenuButton">- <a href="#">menu2</a></li>
<li class="MenuButton">- <a href="#">menu3</a></li>
<li class="MenuButton">- <a href="#">menu4</a></li>
<li class="MenuButtonEnd">- <a href="#">menu5</a></li>
</ul>
</li>
<!-- menu4 -->
<li id="TabView4" onMouseover="TabView('MnewTab4')" onMouseOut="TabClear('MnewTab4')"> <a href="#" onFocus="TabView('MnewTab4')">
<div id="Mnewsbt4">Photogallery</div>
</a>
<ul id="MnewTab4">
<li class="MenuButton">- <a href="#">introduce</a></li>
<li class="MenuButton">- <a href="#">menu2</a></li>
<li class="MenuButton">- <a href="#">menu3</a></li>
<li class="MenuButton">- <a href="#">menu4</a></li>
<li class="MenuButtonEnd">- <a href="#">menu5</a></li>
</ul>
</li>
<!-- menu5 -->
<li id="TabView5"onMouseover="TabView('MnewTab5')" onMouseOut="TabClear('MnewTab5')"> <a href="#" onFocus="TabView('MnewTab5')">
<div id="Mnewsbt5">Spoiler</div>
</a>
<ul id="MnewTab5">
<li class="MenuButton">- <a href="#">introduce</a></li>
<li class="MenuButton">- <a href="#">menu2</a></li>
<li class="MenuButton">- <a href="#">menu3</a></li>
<li class="MenuButton">- <a href="#">menu4</a></li>
<li class="MenuButtonEnd">- <a href="#">menu5</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>