I have a CSS menu that works fine until i use images for the main buttons when the sub menu does not stay open any longer.
html is
so if i change
<a href="javascrip t:void(0)"><img src="http://bytes.com/submit/images/artistnav/Accents.png" id="accents"></a>
to
<a href="javascrip t:void(0)">ACCE NTS</a>
all works fine
Jquery is
Im sure its something to do with the JQuery but just cant see it
page is here
html is
Code:
<ul id="nav">
<li class="dropdown"><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/artistnav/Accents.png" id="accents"></a>
<ul class="dropdown-menu">
<li><a href="boys.asp?id=USA/Mid-Atlantic">USA/MID ATLANTIC</a></li><BR>
UK ACCENTS<br>
<li><a href="boys.asp?id=Brummie">BRUMMIE</a></li>
<li><a href="boys.asp?id=Geordie">GEORDIE</a></li>
<li><a href="boys.asp?id=Irish">IRISH</a></li>
<li><a href="boys.asp?id=Lancashire">LANCASHIRE</a></li>
<li><a href="boys.asp?id=London">LONDON</a></li>
<li><a href="boys.asp?id=Manchester">MANCHESTER</a></li>
<li><a href="boys.asp?id=Midlands">MIDLANDS</a></li>
<li><a href="boys.asp?id=Neutral">NEUTRAL</a></li>
<li><a href="boys.asp?id=Northern">NORTHERN</a></li>
<li><a href="boys.asp?id=RP">RP</a></li>
<li><a href="boys.asp?id=Scottish">SCOTTISH</a></li>
<li><a href="boys.asp?id=Welsh">WELSH</a></li>
<li><a href="boys.asp?id=West-Country">WEST COUNTRY</a></li>
<li><a href="boys.asp?id=Yorkshire">YORKSHIRE</a></li><br>
WORLD ACCENTS<br>
<li><a href="boys.asp?id=Afro-Caribbean">AFRO CARIBBEAN</a></li>
<li><a href="boys.asp?id=African">AFRICAN</a></li>
<li><a href="boys.asp?id=Arabic">ARABIC</a></li>
<li><a href="boys.asp?id=Australian">AUSTRALIAN</a></li>
<li><a href="boys.asp?id=Dutch">DUTCH</a></li>
<li><a href="boys.asp?id=French">FRENCH</a></li>
<li><a href="boys.asp?id=German">GERMAN</a></li>
<li><a href="boys.asp?id=Hebrew">HEBREW</a></li>
<li><a href="boys.asp?id=Icelandic">ICELANDIC</a></li>
<li><a href="boys.asp?id=Indian">INDIAN</a></li>
<li><a href="boys.asp?id=Mexican">MEXICAN</a></li>
<li><a href="boys.asp?id=Norwegian">NORWEGIAN</a></li>
<li><a href="boys.asp?id=Oriental">ORIENTAL</a></li>
<li><a href="boys.asp?id=Russian">RUSSIAN</a></li>
<li><a href="boys.asp?id=Scandi">SCANDI</a></li>
<li><a href="boys.asp?id=South-African">SOUTH AFRICAN</a></li>
<li><a href="boys.asp?id=Spanish">SPANISH</a></li>
<li><a href="boys.asp?id=Swedish">SWEDISH</a></li>
<li><a href="boys.asp?id=Turkish">TURKISH</a></li><br>
FOREIGN LANGUAGES<br>
<li><a href="boys.asp?id=French-Language">FRENCH</a></li>
<li><a href="boys.asp?id=Hebrew-Language">HEBREW</a></li>
<li><a href="boys.asp?id=Hindi-Language">HINDI</a></li>
<li><a href="boys.asp?id=Icelandic-Language">ICELANDIC</a></li>
<li><a href="boys.asp?id=Norwegian-Language">NORWEGIAN</a></li>
<li><a href="boys.asp?id=Punjabi-Language">PUNJABI</a></li>
</ul>
</li>
<li class="dropdown"><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/artistnav/Ages.png" id="ages"></a>
<ul class="dropdown-menu">
<li><a href="KIDS.asp?id=aLL">KIDS</a></li>
<li><a href="boys.asp?id=Teenage">TEENAGE</a></li>
<li><a href="boys.asp?id=Teenage-20s">TEENAGE - 20's</a></li>
<li><a href="boys.asp?id=20s">20's</a></li
><li><a href="boys.asp?id=20s-30s">20's - 30's</a></li>
<li><a href="boys.asp?id=30s">30's</a></li>
<li><a href="boys.asp?id=30s-40s">30's - 40's</a></li>
<li><a href="boys.asp?id=40s-50s">40's - 50's</a></li>
<li><a href="boys.asp?id=40s">40's</a></li>
<li><a href="boys.asp?id=50-Plus">50 PLUS</a></li>
</ul>
</li>
<li class="dropdown"><a href="javascript:void(0)"><img src="http://bytes.com/submit/images/artistnav/Styles.png" id="styles"></a>
<ul class="dropdown-menu">
<li><a href="boys.asp?id=Animation/Cartoon">ANIMATION/CARTOON</a></li>
<li><a href="boys.asp?id=Aspirational">ASPIRATIONAL</a></li>
<li><a href="boys.asp?id=Authoritative">AUTHORITATIVE</a></li>
<li><a href="boys.asp?id=Characterful/Quirky">CHARACTERFUL/QUIRKY</a></li>
<li><a href="boys.asp?id=Comedy/Humorous">COMEDY/HUMOROUS</a></li>
<li><a href="boys.asp?id=Cool/Contemporary">COOL/CONTEMPORARY</a></li>
<li><a href="boys.asp?id=Deep/Powerful/Dramatic">DEEP/POWERFUL/DRAMATIC</a></li>
<li><a href="boys.asp?id=Documentary/Corporate">DOCUMENTARY/CORPORATE</a></li>
<li><a href="boys.asp?id=Dry/Ironic">DRY/IRONIC</a></li>
<li><a href="boys.asp?id=Friendly/Upbeat">FRIENDLY/UPBEAT</a></li>
<li><a href="boys.asp?id=Impressions">IMPRESSIONS</a></li>
<li><a href="boys.asp?id=Kid-Friendly">KID FRIENDLY</a></li>
<li><a href="boys.asp?id=Light/Bright/Fresh">LIGHT/BRIGHT/FRESH</a></li>
<li><a href="boys.asp?id=Movie-Trailer">MOVIE TRAILER</a></li>
<li><a href="boys.asp?id=Natural/Unaffected">NATURAL/UNAFFECTED</a></li>
<li><a href="boys.asp?id=Ordinary-People">ORDINARY PEOPLE</a></li>
<li><a href="boys.asp?id=Posh">POSH</a></li>
<li><a href="boys.asp?id=Presenter/DJ">PRESENTER/DJ</a></li>
<li><a href="boys.asp?id=Reassuring">REASSURING</a></li>
<li><a href="boys.asp?id=Sensitive">SENSITIVE</a></li>
<li><a href="boys.asp?id=Sexy">SEXY</a></li>
<li><a href="boys.asp?id=Sophisticated">SOPHISTICATED</a></li>
<li><a href="boys.asp?id=Sports-Commentator">SPORTS COMMENTATOR</a></li>
<li><a href="boys.asp?id=Versatile">VERSATILE</a></li>
</ul>
</li>
</ul>
<a href="javascrip t:void(0)"><img src="http://bytes.com/submit/images/artistnav/Accents.png" id="accents"></a>
to
<a href="javascrip t:void(0)">ACCE NTS</a>
all works fine
Jquery is
Code:
$('#nav li').click(function() {
var slideToggle = this;
if ($('ul', this).is(':visible')) {
$('ul', this).slideUp(function() {
$('#content, #topnav, #top, #bottomnav').animate({
opacity:1
},200);
$(slideToggle).removeClass('active');
});
}
else {
$('.dropdown-menu').slideUp(200);
$('ul', this).slideDown(1000);
$('#content, #topnav, #top, #bottomnav').animate({
opacity:.5
},200);
$(slideToggle).addClass('active');
}
});
$('body').click(function(event) {
if (!$(event.target).is('a')) {
$('.dropdown-menu').slideUp(200);
$('#content').animate({
opacity:1
},200);
}
});
page is here
Comment