複数レベルのドロップダウン jquery メニューに若干の問題があります。ドロップダウン機能は動作していますが、オプションにカーソルを合わせると、メニューが何度もフィットし、ドロップダウンして何度も元に戻ります。いくつかのチュートリアルを見てきましたが、どこが間違っているのかわかりません。使用したコーディングに小さな問題があるとしか思えません...ここにhttp://jsfiddle.net/がありますxiah01/6yePs/ ?
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="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<link href="stages.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stages School Of Dance</title>
</head>
<body>
<ul>
<li id='home'><a href="index.html">Home</a>
</li>
<li id='courses'><a href="courses.html">Courses</a>
</li>
<li id='general'><a href="general.html">General</a>
</li>
<li id="gallery"><a href="gallery.html">Gallery and video</a>
<ul class="years" style="display:none">
<li><a href="#">2009</a>
<ul class="yearmonths" style="display:none">
<li class="months"><a href="gallery2009january.html">January</a></li>
<li class="months"><a href="gallery2009march.html">March</a></li>
<li class="months"><a href="gallery2009december.html">December</a></li>
<li class="months"><a href="gallery2009january.html">January</a></li>
<li class="months"><a href="gallery2009march.html">March</a></li>
</ul>
</li>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
<li><a href="#">2012</a></li>
</ul>
</li>
<li id="venue"><a href="venue.html">Venue</a>
</li>
<li id="aboutus"><a href="about.html">About</a>
</li>
</ul>
<div id="index1">
<div class="slideshow">
<img src="4.jpg" />
<img src="2.jpg" />
<img src="1.jpg" />
<img src="3.jpg" />
<img src="5.jpg" />
</div>
<div id="indexaboutus">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed blandit condimentum mi id sodales. Mauris eu nisl nec nibh aliquam cursus ut quis lacus. Duis et erat non sem sollicitudin volutpat a eget lorem. Integer feugiat diam vitae odio auctor gravida. Nullam congue nisi nec felis tristique, id fringilla quam ullamcorper. Cras a sem at justo imperdiet sagittis sodales id eros. Cras tristique urna ipsum, vel sagittis tortor imperdiet ac. Duis volutpat lacus sem, et molestie risus dapibus vitae. Mauris convallis elit sed sapien consectetur fringilla. Nulla consectetur mollis libero, vel eleifend purus rutrum ut. Donec posuere velit leo, et facilisis est vehicula non. Aliquam vel turpis felis. Sed molestie orci sem, in lobortis dui tempor eu. Morbi tempor mauris et aliquam consequat.</p>
<p>Cras id sodales tellus, ut euismod erat. Nunc mi lacus, lobortis nec metus in, laoreet vehicula enim. Fusce semper velit et augue viverra vulputate. Donec suscipit lorem sed nulla tincidunt sodales. Nullam vehicula arcu sapien, sit amet posuere augue tristique pellentesque. Integer sit amet pretium leo, non lobortis dolor. Vivamus sodales eget leo in rhoncus. Phasellus quis dolor faucibus, convallis metus eget, sodales diam. Nulla scelerisque, magna eget placerat gravida, neque ante fringilla enim, at aliquet tortor nibh accumsan quam. Pellentesque iaculis elementum dolor, sed facilisis felis scelerisque sit amet. Praesent aliquam diam erat, eu pellentesque magna blandit ut. Donec vulputate luctus tellus, at iaculis felis faucibus sit amet. Nam nec diam elit. Integer cursus varius ante, nec ullamcorper risus tristique eu. Fusce sed posuere sem.</p>
</div>
</div>
<div class="logo">
<img id="logo1" src="logo2.jpg" alt="Slideshow" />
</div>
</body>
</html>
Jクエリ
$(function(){
$('#gallery').mouseover( function(){
$('.years').slideDown();
});
$('.years').mouseleave( function(){
$('.years').slideUp();
})
})
$(function(){
$('.years').mouseover( function() {
$('.yearmonths').slideDown();
})
$('.yearmonths').mouseleave( function() {
$('.yearmonths').slideUp();
})
})
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
pause: 1,
prev: '#prev',
next: '#next'
});
});
CSS
/** RESET CSS **/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Above is for resetting CSS */
h1 {
font-size:120%;
font-weight:bold;
}
/*index.html */
ul {
list-style-type: none;
vertical-align: top;
margin:0 auto;
width:80%;
text-align:center;
}
li {
display: inline-block;
vertical-align: top;
padding:3px 8px;
}
ul li {
list-style-type: none;
text-decoration:none;
}
A:link {text-decoration: none; color:dimgray; }
A:visited {text-decoration: none; color:dimgray;}
A:active {text-decoration: none; color:dimgray;}
A:hover {background-color:lightgrey; }
#home {
font-weight:bold;
}
#courses {
font-weight:bold;
}
#general {
font-weight:bold;
}
#gallery li {
font-weight:normal;
display: block;
}
#gallery {
font-weight:bold;
}
.years {
padding:0%;
position:relative;
right:35%;
width:100%;
}
.yearmonths {
position:absolute;
font-size:80%;
top:5%;
left:60%;
width:100%;
}
#gallery > ul.years > li {
padding:5%;
}
#venue {
font-weight:bold;
}
#aboutus {
font-weight:bold;
}
#index1 {
padding-top:1%;
width:100%;
border-style:solid;
border-top:solid black;
}
.slideshow {
float:right;
margin-right:15%;
}
.slideshow img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
}
#indexaboutus {
width:25%;
margin-left:15%;
}
.logo {
clear:both;
width:20%;
margin-right:auto;
margin-left:auto;
}
/* venue.html */
.banner {
margin-left:auto;
margin-right:auto;
width:50%;
padding:1%;
}
#venuewidth {
width:100%;
margin-top:2%;
}
.aboutvenue {
width:28%;
float:left;
text-align:center;
margin-left:20%;
}
#map {
float:right;
width:28%;
margin-right:20.5%;
}
/* aboutus.html */
.aboutus {
margin-top:1%;
width:50%;
margin-left:auto;
margin-right:auto;
padding-bottom:2%;
border-radius: 6%;
border-style:solid;
border-top:thick black;
}
.aboutpositioning {
width:51%;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
.teacherphoto {
width:25%;
border-radius:5%;
float:left;
margin:1%;
}
.teachertext {
margin:1%;
}
.teacher1 {
padding-left:1%;
margin-top:1%;
width:44%;
background-color:white;
overflow:hidden;
float:left;
border-radius: 5%;
}
#aboutphoto {
width:100%;
vertical-align: bottom;
}
#contactinfo {
clear:both;
text-align:center;
margin-left:auto;
margin-right:auto;
padding:2%;
border-style:inset;
overflow: hidden;
width:60%;
}