選択したサブメニューの背景色を変更する必要があります。しかし、サブメニューをクリックしたときに背景色を変更する方法がわかりません。
jsfiddle : http://jsfiddle.net/BJQ6y/
私のCSSコード：
.menuContent { background-image:url("../images/new.png"); border:1px solid #C7C7C7; bottom: 0px; position: fixed; width:100%; margin: 0 auto; text-align: center; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-box-shadow: 3px -3px 5px #B8B8B8; -webkit-box-shadow: 3px -3px 5px #B8B8B8; box-shadow: 3px -3px 5px #B8B8B8; }
.menuContent a.slider { background-color:#fff; background-image: -moz-linear-gradient(center top, #ddd, #FFF); background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF)); border: 1px solid #C7C7C7; border-bottom:none; cursor: pointer; float:right; height: 8px; margin:-15px 30px 0 0; padding:3px 20px; width: 8px; z-index: 2001; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 3px -2px 3px #B8B8B8; -webkit-box-shadow: 3px -2px 3px #B8B8B8; box-shadow: 3px -2px 3px #B8B8B8; }
.menuContent a.slider img { padding-bottom: 3px; }
#nav { list-style: none; padding: 0px; margin: 0px; }
#nav li { display: inline-block; background: #222; }
#nav li a { color:#858585; font-weight: bold; display: block; padding: 15px 25px; text-align:center; text-decoration:none; width: auto; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; text-transform:uppercase; min-width: 125px; }
#nav li li a { padding: 10px 5px; text-align: left; }
#nav li li li a { padding: 7px 5px; text-align: left; }
#nav li ul { background: #333; margin: 0px; padding: 0px; }
#nav li a:hover, #nav li a.active, #nav li a.sel { background-color:#fff; color: #222; }
#nav li ul { display:none; }
#nav li ul li { background: #CCC; }
#nav li ul li ul{ background: #222; }
#nav li ul li li { background: #600; }
#nav li ul li { margin: 5px 0; display: block; }
#nav li a img { border-width: 0px; margin-right: 8px; vertical-align: middle; }
#nav ul li a img { background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; vertical-align:middle; width:16px; }
#nav li ul li { border-bottom: 1px solid #ccc; }
#nav li li ul { margin-left: 25px; }
私のHTML CLde
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Bharatanatyam</title>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script>
$(function(){
$('.slider').click(function () {
$('#nav').slideToggle(300);
var img = $(this).find('img');
if ($(img).attr('id') == 'bot') {
$(img).attr('src', 'images/arrow_top.png');
$(img).attr('id', 'top');
} else {
$(img).attr('src', 'images/arrow_bottom.png');
$(img).attr('id', 'bot');
}
});
$('.sub').click(function () {
var cur = $(this).prev();
$('#nav li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
});
$('.sub_menu').click(function () {
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
//$(this).css("background", "red");
});
$(cur).slideToggle(300);
});
});
</script>
</head>
<body>
<div class="menuContent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
<ul id="nav">
<li>
<ul id="1">
<li>
<ul id="2">
<li><a href="#">Profile</a></li>
<li><a href="#">Presentations</a></li>
<li><a href="#">Recitals</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">downloads</a></li>
</ul>
<a href="#" class="sub_menu">Bharatanatyam</a></li>
<li>
<ul id="3">
<li><a href="#">Profile</a></li>
<li><a href="#">Presentations</a></li>
<li><a href="#">Recitals</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">downloads</a></li>
</ul>
<a href="#" class="sub_menu">Kuchipudi</a></li>
</ul>
<a href="#" class="sub sel" tabindex="1">Sailaja</a> </li>
<li>
<ul id="4">
<li><a href="#">About Sailasudha</a></li>
<li><a href="#">Admission</a></li>
<li><a href="#">Presentation</a></li>
<li><a href="#">Recticals</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<a href="#" class="sub" tabindex="1">Sailasudha</a> </li>
<li>
<ul id="5">
<li><a href="#">Philosophy</a></li>
<li>
<ul id="6">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul>
<a href="#" class="sub_menu" >Year 1</a></li>
<li><ul id="7">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul><a href="#" class="sub_menu" >Year 2</a></li>
<li><ul id="8">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul><a href="#" class="sub_menu" >Year 3</a></li>
<li><ul id="9">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul><a href="#" class="sub_menu" >Year 4</a></li>
<li><ul id="10">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul><a href="#" class="sub_menu" >Year 5</a></li>
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul>
<a href="#" class="sub" tabindex="1">Nrityanasangama</a> </li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
私の疑問：
「クチプディ」メニューをクリックすると、そのサブメニューが開きます。その際、「クチプディ」の背景が選択メニューとして変更されます。
「Bharatanatyam」メニューをクリックすると、そのサブメニューが開きます。その時、「クチプディ」の背景は以前と同じように変更され、「バラタナティヤム」の背景色は選択されたメニューとして変更されます。変更方法がわかりません。背景色が変わります。