jQuery - navigation position

作ってみた 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>Beautiful Background Image Navigation</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<!--[if lte IE 6]>
<link rel="stylesheet" href="css/styleIE6.css" media="screen"/>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery.bgpos.js"></script>
<script src="js/bbi.js"></script>
</head>
<body>
<div id="content">
<div id="menuWrapper" class="menuWrapper bg1">
<ul class="menu" id="menu">
<li class="bg1" style="background-position:0 0;">
<a id="bg1" href="#">チョウチョウウオ</a>
<ul class="sub1" style="background-position:0 0;">
    <li><a href="#">トゲチョウチョウウオ</a></li>
    <li><a href="#">カズミチョウチョウウオ</a></li>
    <li><a href="#">ウミズキチョウチョウウオ</a></li>
</ul>
</li>
<li class="bg1" style="background-position:-266px 0px;">
<a id="bg2" href="#">フサカサゴ</a>
<ul class="sub2" style="background-position:-266px 0;">
    <li><a href="#">キミオコゼ</a></li>
    <li><a href="#">ハナミノカサゴ</a></li>
    <li><a href="#">ヒレボシミノカサゴ</a></li>
</ul>
</li>
<li class="last bg1" style="background-position:-532px 0px;">
<a id="bg3" href="#">ハナダイ</a>
<ul class="sub3" style="background-position:-266px 0;">
    <li><a href="#">ハナゴンベ</a></li>
    <li><a href="#">オシャレハナダイ</a></li>
    <li><a href="#">ケラマハナダイ</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
body{
    font-family: Arial;
    padding-top: 30px;
    background: #000 url(title.png) no-repeat center top;
}
.menuWrapper{
    font-family: "Trebuchet MS", Arial, sans-serif;;
    font-size: 15px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: normal;
    line-height: 1.45em;
    position: relative;
    margin: 20px auto;
    height: 542px;
    width: 797px;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-color: transparent;
}
ul.menu{
    list-style: none;
    width: 797px;
}
ul.menu > li{
    float: left;
    width: 265px;
    height: 542px;
    border-right: 1px solid #777;
    background-repeat: no-repeat;
    background-color: transparent;
}
ul.menu > li.last{
    border: none;
}
.bg1{
    background-image: url(../images/1.jpg);
}
.bg2{
    background-image: url(../images/2.jpg);
}
.bg3{
    background-image: url(../images/3.jpg);
}
ul.menu > li > a{
    float: left;
    width: 265px;
    height: 50px;
    margin-top: 450px;
    text-align: center;
    line-height: 50px;
    color: #ddd;
    background-color: #333;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0px 0px 1px #fff;
}
ul.menu > li ul{
    list-style: none;
    float: left;
    margin-top: -180px;
    width: 100%;
    height: 110px;
    padding-top: 20px;
    background-repeat: no-repeat;
    background-color: transparent;
}
ul.menu > li ul li{
    display: one;
}
ul.menu > li ul.sub1{
    background-image: url(../images/bg1sub.png);
}
ul.menu > li ul.sub2{
    background-image: url(../images/bg2sub.png);
}
ul.menu > li ul.sub3{
    background-image: url(../images/bg3sub.png);
}
ul.menu > li ul li a{
    color: #fff;
    text-decoration: none;
    line-height: 30px;
    margin-left: 20px;
    text-shadow: 1px 1px 1px #444;
    font-size: 16px;
}
ul.menu > li ul.sub1 li{
    display: block;
}
ul.menu > li ul li a: hover{
    border-bottom: 1px dotted #fff;
}