i have a jquery menu with the following code
the following html
and this for css
works fine in all browsers except ie where if you click the tab the sub menu appears but as soon as your mouse leaves the tab button the sub menu disappears??
Strange because it seems to work the first time but then seems to start going wrong.
page can be seen here
thanks
Code:
$(document).ready(function () {
$('#UKAccentsidtab').bind('click', function() {
$('#ulUKAccentsid').css('visibility', 'visible');
$('#biog').css('visibility', 'hidden');
});
$('div #containerUKAccentsid').bind('mouseleave',function(){
$('#ulUKAccentsid').css('visibility', 'hidden');
$('#biog').css('visibility', 'visible');
});
$('#Agesidtab').bind('click', function() {
$('#ulAgesid').css('visibility', 'visible');
$('#biog').css('visibility', 'hidden');
});
$('div #containerAgesid').bind('mouseleave',function(){
$('#ulAgesid').css('visibility', 'hidden');
$('#biog').css('visibility', 'visible');
});
$('#Stylesidtab').bind('click', function() {
$('#ulStylesid').css('visibility', 'visible');
$('#biog').css('visibility', 'hidden');
});
$('div #containerStylesid').bind('mouseleave',function(){
$('#ulStylesid').css('visibility', 'hidden');
$('#biog').css('visibility', 'visible');
});
$('#WorldAccentsidtab').bind('click', function() {
$('#ulWorldAccentsid').css('visibility', 'visible');
$('#biog').css('visibility', 'hidden');
});
$('div #containerWorldAccentsid').bind('mouseleave',function(){
$('#ulWorldAccentsid').css('visibility', 'hidden');
$('#biog').css('visibility', 'visible');
});
$('#ForeignLanguagesidtab').bind('click', function() {
$('#ulForeignLanguagesid').css('visibility', 'visible');
$('#biog').css('visibility', 'hidden');
});
$('div #containerForeignLanguagesid').bind('mouseleave',function(){
$('#ulForeignLanguagesid').css('visibility', 'hidden');
$('#biog').css('visibility', 'visible');
});
});
Code:
<ul id="ddmenu">
<li><a href="boys2.asp?id=386&voicetype=All" id="maintab">Main Page</a></li>
<div id="containerUKAccentsid">
<li><a href="javascript:void(0)" id="UKAccentsidtab">UK Accents</a>
<ul id="ulUKAccentsid">
<li><div class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Neutral" >Neutral</a></div></li>
<li><div class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Irish" >Irish</a></div></li>
<li><div class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Scottish" >Scottish</a></div></li>
</ul>
</li>
</div>
<div id="containerAgesid">
<li><a href="javascript:void(0)" id="Agesidtab">Ages</a>
<ul id="ulAgesid">
<li><div class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=20s-30s" >20's - 30's</a></div></li>
<li><div class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=30s" >30s</a></div></li>
<li><div class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=30s-40s" >30's - 40's</a></div></li>
</ul>
</li>
</div>
<div id="containerStylesid">
<li><a href="javascript:void(0)" id="Stylesidtab">Styles</a>
<ul id="ulStylesid">
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Animation/Cartoon" >Animation/Cartoon</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Authoritative" >Authoritative</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Characterful/Quirky" >Characterful/Quirky</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Comedy/Humorous" >Comedy/Humorous</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Deep/Powerful/Dramatic" >Deep/Powerful/Dramatic</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Documentary/Corporate" >Documentary/Corporate</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Friendly/Upbeat" >Friendly/Upbeat</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Impressions" >Impressions</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Kid-Friendly" >Kid Friendly</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Movie-Trailer" >Movie Trailer</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Sports-Commentator" >Sports Commentator</a></div></li>
<li><div class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Versatile" >Versatile</a></div></li>
</ul>
</li>
</div>
<div id="containerWorldAccentsid">
<li><a href="javascript:void(0)" id="WorldAccentsidtab">World Accents</a>
<ul id="ulWorldAccentsid">
<li><div class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Australian" >Australian</a></div></li>
<li><div class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Dutch" >Dutch</a></div></li>
<li><div class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=French" >French</a></div></li>
<li><div class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Mexican" >Mexican</a></div></li>
<li><div class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Oriental" >Oriental</a></div></li>
<li><div class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Russian" >Russian</a></div></li>
<li><div class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=South-African" >South African</a></div></li>
<li><div class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Spanish" >Spanish</a></div></li>
</ul>
</li>
</div>
<li><a href="boys2.asp?id=386&voicetype=USA/Mid-Atlantic" id="usatab">USA / Mid Atlantic</a>
</li>
<div id="containerForeignLanguagesid">
<li><a href="javascript:void(0)" id="ForeignLanguagesidtab">Foreign Languages</a>
<ul id="ulForeignLanguagesid">
<li><div class="liForeignLanguagesidtext"><a href="boys2.asp?id=386&voicetype=French-Language" >French Language</a></div></li>
</ul>
</li>
</div>
</ul>
Code:
#maintab {
padding-top: 5px;
margin-right: 3px;
float: left;
list-style: none;
font: 13px Arial, Helvetica, sans-serif;
color: #000;
width: 120px;
height: 25px;
text-align:center;
background-color: #f39617;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#maintab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#usatab {
padding-top: 5px;
margin-right: 3px;
float: left;
list-style: none;
font: 12px Arial, Helvetica, sans-serif;
color: #000;
width: 120px;
height: 25px;
text-align:center;
background-color: #f39617;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#usatab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#UKAccentsidtab {
padding-top: 5px;
margin-right: 3px;
float: left;
list-style: none;
font: 13px Arial, Helvetica, sans-serif;
color: #000;
width: 120px;
height: 25px;
text-align:center;
background-color: #f39617;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#UKAccentsidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#Agesidtab {
padding-top: 5px;
margin-right: 3px;
float: left;
list-style: none;
font: 13px Arial, Helvetica, sans-serif;
color: #000;
width: 120px;
height: 25px;
text-align:center;
background-color: #f39617;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#Agesidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#Stylesidtab {
padding-top: 5px;
margin-right: 3px;
float: left;
list-style: none;
font: 13px Arial, Helvetica, sans-serif;
color: #000;
width: 120px;
height: 25px;
text-align:center;
background-color: #f39617;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#Stylesidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#WorldAccentsidtab {
padding-top: 5px;
margin-right: 3px;
float: left;
list-style: none;
font: 13px Arial, Helvetica, sans-serif;
color: #000;
width: 120px;
height: 25px;
text-align:center;
background-color: #f39617;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#WorldAccentsidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#ForeignLanguagesidtab {
padding-top: 5px;
margin-right: 3px;
float: left;
list-style: none;
font: 12px Arial, Helvetica, sans-serif;
color: #000;
width: 125px;
height: 25px;
text-align:center;
background-color: #f39617;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#ForeignLanguagesidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#ddmenu {
margin: 0;
margin-left: 0px;
padding: 0;
height:43px;
width:938px;
}
#ddmenu li {
float: left;
list-style: none;
font: 16px Arial, Helvetica, sans-serif;
}
/* the following set width of seperate sub menu */
#ulAgesid {
margin-top: 30px;
padding: 3px;
padding-top: 8px;
position: absolute;
visibility: hidden;
width: auto;
max-width: 520px;
min-width: 240px;
}
#ulAgesid li{
margin-top: 12px;
margin: 6px;
}
#ulStylesid {
margin-top: 30px;
padding: 3px;
padding-top: 8px;
position: absolute;
visibility: hidden;
width: auto;
max-width: 520px;
min-width: 200px;
}
#ulStylesid li{
margin-top: 12px;
margin: 6px;
}
#ulUKAccentsid {
margin-top: 30px;
padding: 3px;
padding-top: 8px;
position: absolute;
visibility: hidden;
width: auto;
max-width: 600px;
min-width: 200px;
}
#ulUKAccentsid li{
margin-top: 12px;
margin: 6px;
}
#ulWorldAccentsid {
margin-top: 30px;
padding: 3px;
padding-top: 8px;
position: absolute;
visibility: hidden;
width: auto;
max-width: 400px;
min-width: 250px;
}
#ulWorldAccentsid li{
margin-top: 12px;
margin: 6px;
}
#ulForeignLanguagesid {
margin-top: 30px;
padding: 3px;
padding-top: 8px;
position: absolute;
visibility: hidden;
width: auto;
max-width: 170px;
min-width: 150px;
}
#ulForeignLanguagesid li{
margin-top: 12px;
margin: 6px;
}
/* end width of sub menu */
/* settings for seperate elemnts of each sub menu */
#ulForeignLanguagesid a {
width:auto;
display: inline;
color: #000;
font-size: 11px;
padding: 3px 3px;
font-weight: 800;
background-color: #fff;
border: solid #ef007b 2px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ulWorldAccentsid a {
width:auto;
display: inline;
color: #000;
font-size: 11px;
padding: 3px 3px;
font-weight: 800;
background-color: #fff;
border: solid #ef007b 2px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ulUKAccentsid a {
width:auto;
display: inline;
color: #000;
font-size: 11px;
padding: 3px 3px;
font-weight: 800;
background-color: #fff;
border: solid #ef007b 2px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ulStylesid a {
width:auto;
display: inline;
color: #000;
font-size: 11px;
padding: 3px 3px;
font-weight: 800;
background-color: #fff;
border: solid #ef007b 2px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ulAgesid a {
width:auto;
display: inline;
color: #000;
font-size: 11px;
padding: 3px 3px;
font-weight: 800;
background-color: #fff;
border: solid #ef007b 2px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ulForeignLanguagesid a:hover {
color: #f39617;
}
#ulWorldAccentsid a:hover {
color: #f39617;
}
#ulUKAccentsid a:hover {
color: #f39617;
}
#ulStylesid a:hover {
color: #f39617;
}
#ulAgesid a:hover {
color: #f39617;
}
@media all and (min-width:1500px){
/* the following set width of seperate sub menu */
#maintab {
padding-top: 5px;
margin-right: 3px;
font: 14px Arial, Helvetica, sans-serif;
width: 131px;
height: 31px;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#maintab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#usatab {
padding-top: 5px;
margin-right: 3px;
font: 13px Arial, Helvetica, sans-serif;
width: 131px;
height: 31px;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#usatab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#UKAccentsidtab {
padding-top: 5px;
margin-right: 3px;
font: 14px Arial, Helvetica, sans-serif;
width: 131px;
height: 31px;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#UKAccentsidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#Agesidtab {
padding-top: 5px;
margin-right: 3px;
font: 14px Arial, Helvetica, sans-serif;
width: 131px;
height: 31px;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#Agesidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#Stylesidtab {
padding-top: 5px;
margin-right: 3px;
font: 14px Arial, Helvetica, sans-serif;
width: 131px;
height: 31px;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#Stylesidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#WorldAccentsidtab {
padding-top: 5px;
margin-right: 3px;
font: 14px Arial, Helvetica, sans-serif;
width: 131px;
height: 31px;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#WorldAccentsidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#ForeignLanguagesidtab {
padding-top: 5px;
margin-right: 3px;
font: 13px Arial, Helvetica, sans-serif;
width: 131px;
height: 31px;
border: solid #f39617 2px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
font-weight:600;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
#ForeignLanguagesidtab:hover {
color: #fff;
background-color: #ef007b;
border: solid #ef007b 2px;
}
#ddmenu {
margin: 0;
margin-left: 0px;
padding: 0;
height:43px;
width:1200px;
}
#ulAgesid {
padding: 5px;
padding-top: 15px;
max-width: 620px;
min-width: 240px;
}
#ulAgesid li{
margin-top: 15px;
margin: 10px;
}
#ulStylesid {
padding: 5px;
padding-top: 15px;
max-width: 720px;
min-width: 200px;
}
#ulStylesid li{
margin-top: 15px;
margin: 10px;
}
#ulUKAccentsid {
padding: 5px;
padding-top: 15px;
max-width: 600px;
min-width: 200px;
}
#ulUKAccentsid li{
margin-top: 15px;
margin: 10px;
}
#ulWorldAccentsid {
padding: 5px;
padding-top: 15px;
max-width: 650px;
min-width: 550px;
}
#ulWorldAccentsid li{
margin-top: 15px;
margin: 10px;
}
#ulForeignLanguagesid {
padding: 5px;
padding-top: 15px;
max-width: 500px;
min-width: 200px;
}
#ulForeignLanguagesid li{
margin-top: 15px;
margin: 10px;
}
/* end width of sub menu */
/* settings for seperate elemnts of each sub menu */
#ulForeignLanguagesid a {
margin-left: -10px;
font-size: 13px;
padding: 6px 6px;
border: solid #ef007b 2px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#ulWorldAccentsid a {
margin-left: -10px;
font-size: 13px;
padding: 6px 6px;
border: solid #ef007b 2px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#ulUKAccentsid a {
margin-left: -10px;
font-size: 13px;
padding: 6px 6px;
border: solid #ef007b 2px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#ulStylesid a {
margin-left: -10px;
font-size: 13px;
padding: 6px 6px;
border: solid #ef007b 2px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#ulAgesid a {
margin-left: -10px;
font-size: 13px;
padding: 6px 6px;
border: solid #ef007b 2px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
}
Strange because it seems to work the first time but then seems to start going wrong.
page can be seen here
thanks
Comment