By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,693 Members | 1,803 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,693 IT Pros & Developers. It's quick & easy.

JQuery menu not working in ie

100+
P: 347
i have a jquery menu with the following code

Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function () {
  2.  
  3.     $('#UKAccentsidtab').bind('click', function() {
  4.         $('#ulUKAccentsid').css('visibility', 'visible');
  5.         $('#biog').css('visibility', 'hidden');
  6.     });
  7.     $('div #containerUKAccentsid').bind('mouseleave',function(){
  8.         $('#ulUKAccentsid').css('visibility', 'hidden');
  9.         $('#biog').css('visibility', 'visible');
  10. });
  11.  
  12. $('#Agesidtab').bind('click', function() {
  13.         $('#ulAgesid').css('visibility', 'visible');
  14.         $('#biog').css('visibility', 'hidden');
  15.     });
  16.     $('div #containerAgesid').bind('mouseleave',function(){
  17.         $('#ulAgesid').css('visibility', 'hidden');
  18.         $('#biog').css('visibility', 'visible');
  19. });
  20.  
  21. $('#Stylesidtab').bind('click', function() {
  22.         $('#ulStylesid').css('visibility', 'visible');
  23.         $('#biog').css('visibility', 'hidden');
  24.     });
  25.     $('div #containerStylesid').bind('mouseleave',function(){
  26.         $('#ulStylesid').css('visibility', 'hidden');
  27.         $('#biog').css('visibility', 'visible');
  28. });
  29.  
  30. $('#WorldAccentsidtab').bind('click', function() {
  31.         $('#ulWorldAccentsid').css('visibility', 'visible');
  32.         $('#biog').css('visibility', 'hidden');
  33.     });
  34.     $('div #containerWorldAccentsid').bind('mouseleave',function(){
  35.         $('#ulWorldAccentsid').css('visibility', 'hidden');
  36.         $('#biog').css('visibility', 'visible');
  37. });
  38.  
  39. $('#ForeignLanguagesidtab').bind('click', function() {
  40.         $('#ulForeignLanguagesid').css('visibility', 'visible');
  41.         $('#biog').css('visibility', 'hidden');
  42.     });
  43.     $('div #containerForeignLanguagesid').bind('mouseleave',function(){
  44.         $('#ulForeignLanguagesid').css('visibility', 'hidden');
  45.         $('#biog').css('visibility', 'visible');
  46. });
  47.     });
the following html

Expand|Select|Wrap|Line Numbers
  1. <ul id="ddmenu">
  2.  <li><a href="boys2.asp?id=386&voicetype=All" id="maintab">Main Page</a></li>
  3.  
  4.  
  5. <div id="containerUKAccentsid">
  6.     <li><a href="javascript:void(0)"  id="UKAccentsidtab">UK Accents</a>
  7.         <ul id="ulUKAccentsid">
  8.  
  9.         <li><div  class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Neutral" >Neutral</a></div></li>
  10.  
  11.         <li><div  class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Irish" >Irish</a></div></li>
  12.  
  13.         <li><div  class="liUKAccentsidtext"><a href="boys2.asp?id=386&voicetype=Scottish" >Scottish</a></div></li>
  14.  
  15.  
  16.         </ul>         
  17.     </li>
  18.     </div>
  19.  
  20.  
  21. <div id="containerAgesid">
  22.     <li><a href="javascript:void(0)"  id="Agesidtab">Ages</a>
  23.         <ul id="ulAgesid">
  24.  
  25.         <li><div  class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=20s-30s" >20's - 30's</a></div></li>
  26.  
  27.         <li><div  class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=30s" >30s</a></div></li>
  28.  
  29.         <li><div  class="liAgesidtext"><a href="boys2.asp?id=386&voicetype=30s-40s" >30's - 40's</a></div></li>
  30.  
  31.  
  32.         </ul>         
  33.     </li>
  34.     </div>
  35.  
  36.  
  37. <div id="containerStylesid">
  38.     <li><a href="javascript:void(0)"  id="Stylesidtab">Styles</a>
  39.         <ul id="ulStylesid">
  40.  
  41.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Animation/Cartoon" >Animation/Cartoon</a></div></li>
  42.  
  43.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Authoritative" >Authoritative</a></div></li>
  44.  
  45.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Characterful/Quirky" >Characterful/Quirky</a></div></li>
  46.  
  47.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Comedy/Humorous" >Comedy/Humorous</a></div></li>
  48.  
  49.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Deep/Powerful/Dramatic" >Deep/Powerful/Dramatic</a></div></li>
  50.  
  51.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Documentary/Corporate" >Documentary/Corporate</a></div></li>
  52.  
  53.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Friendly/Upbeat" >Friendly/Upbeat</a></div></li>
  54.  
  55.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Impressions" >Impressions</a></div></li>
  56.  
  57.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Kid-Friendly" >Kid Friendly</a></div></li>
  58.  
  59.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Movie-Trailer" >Movie Trailer</a></div></li>
  60.  
  61.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Sports-Commentator" >Sports Commentator</a></div></li>
  62.  
  63.         <li><div  class="liStylesidtext"><a href="boys2.asp?id=386&voicetype=Versatile" >Versatile</a></div></li>
  64.  
  65.  
  66.         </ul>         
  67.     </li>
  68.     </div>
  69.  
  70.  
  71. <div id="containerWorldAccentsid">
  72.     <li><a href="javascript:void(0)"  id="WorldAccentsidtab">World Accents</a>
  73.         <ul id="ulWorldAccentsid">
  74.  
  75.         <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Australian" >Australian</a></div></li>
  76.  
  77.         <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Dutch" >Dutch</a></div></li>
  78.  
  79.         <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=French" >French</a></div></li>
  80.  
  81.         <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Mexican" >Mexican</a></div></li>
  82.  
  83.         <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Oriental" >Oriental</a></div></li>
  84.  
  85.         <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Russian" >Russian</a></div></li>
  86.  
  87.         <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=South-African" >South African</a></div></li>
  88.  
  89.         <li><div  class="liWorldAccentsidtext"><a href="boys2.asp?id=386&voicetype=Spanish" >Spanish</a></div></li>
  90.  
  91.  
  92.         </ul>         
  93.     </li>
  94.     </div>
  95.  
  96. <li><a href="boys2.asp?id=386&voicetype=USA/Mid-Atlantic" id="usatab">USA / Mid Atlantic</a>
  97. </li>
  98.  
  99.  
  100. <div id="containerForeignLanguagesid">
  101.     <li><a href="javascript:void(0)"  id="ForeignLanguagesidtab">Foreign Languages</a>
  102.         <ul id="ulForeignLanguagesid">
  103.  
  104.         <li><div  class="liForeignLanguagesidtext"><a href="boys2.asp?id=386&voicetype=French-Language" >French Language</a></div></li>
  105.  
  106.  
  107.         </ul>         
  108.     </li>
  109.     </div>
  110.  
  111.  
  112. </ul>
  113.  
and this for css

Expand|Select|Wrap|Line Numbers
  1. #maintab {
  2.     padding-top: 5px;
  3.     margin-right: 3px; 
  4.     float: left;
  5.     list-style: none;
  6.     font: 13px Arial, Helvetica, sans-serif;
  7.     color: #000;
  8.     width: 120px;
  9.     height: 25px;
  10.     text-align:center;
  11.     background-color: #f39617;
  12.     border: solid #f39617 2px;
  13.     -moz-border-radius: 8px;
  14.     -ms-border-radius: 8px;
  15.     -o-border-radius: 8px;
  16.     -webkit-border-radius: 8px;
  17.     border-radius: 8px;
  18.     font-weight:600;
  19.     border-bottom-right-radius: 0px;
  20.     border-bottom-left-radius: 0px;
  21. }
  22. #maintab:hover {
  23.     color: #fff;
  24.     background-color: #ef007b;
  25.     border: solid #ef007b 2px;
  26. }
  27.  
  28. #usatab {
  29.     padding-top: 5px;
  30.     margin-right: 3px; 
  31.     float: left;
  32.     list-style: none;
  33.     font: 12px Arial, Helvetica, sans-serif;
  34.     color: #000;
  35.     width: 120px;
  36.     height: 25px;
  37.     text-align:center;
  38.     background-color: #f39617;
  39.     border: solid #f39617 2px;
  40.     -moz-border-radius: 8px;
  41.     -ms-border-radius: 8px;
  42.     -o-border-radius: 8px;
  43.     -webkit-border-radius: 8px;
  44.     border-radius: 8px;
  45.     font-weight:600;
  46.     border-bottom-right-radius: 0px;
  47.     border-bottom-left-radius: 0px;
  48. }
  49. #usatab:hover {
  50.     color: #fff;
  51.     background-color: #ef007b;
  52.     border: solid #ef007b 2px;
  53. }
  54. #UKAccentsidtab {
  55.     padding-top: 5px;
  56.     margin-right: 3px; 
  57.     float: left;
  58.     list-style: none;
  59.     font: 13px Arial, Helvetica, sans-serif;
  60.     color: #000;
  61.     width: 120px;
  62.     height: 25px;
  63.     text-align:center;
  64.     background-color: #f39617;
  65.     border: solid #f39617 2px;
  66.     -moz-border-radius: 8px;
  67.     -ms-border-radius: 8px;
  68.     -o-border-radius: 8px;
  69.     -webkit-border-radius: 8px;
  70.     border-radius: 8px;
  71.     font-weight:600;
  72.     border-bottom-right-radius: 0px;
  73.     border-bottom-left-radius: 0px;
  74. }
  75. #UKAccentsidtab:hover {
  76.     color: #fff;
  77.     background-color: #ef007b;
  78.     border: solid #ef007b 2px;
  79. }
  80. #Agesidtab {
  81.     padding-top: 5px;
  82.     margin-right: 3px; 
  83.     float: left;
  84.     list-style: none;
  85.     font: 13px Arial, Helvetica, sans-serif;
  86.     color: #000;
  87.     width: 120px;
  88.     height: 25px;
  89.     text-align:center;
  90.     background-color: #f39617;
  91.     border: solid #f39617 2px;
  92.     -moz-border-radius: 8px;
  93.     -ms-border-radius: 8px;
  94.     -o-border-radius: 8px;
  95.     -webkit-border-radius: 8px;
  96.     border-radius: 8px;
  97.     font-weight:600;
  98.     border-bottom-right-radius: 0px;
  99.     border-bottom-left-radius: 0px;
  100. }
  101. #Agesidtab:hover {
  102.     color: #fff;
  103.     background-color: #ef007b;
  104.     border: solid #ef007b 2px;
  105. }
  106. #Stylesidtab {
  107.     padding-top: 5px;
  108.     margin-right: 3px; 
  109.     float: left;
  110.     list-style: none;
  111.     font: 13px Arial, Helvetica, sans-serif;
  112.     color: #000;
  113.     width: 120px;
  114.     height: 25px;
  115.     text-align:center;
  116.     background-color: #f39617;
  117.     border: solid #f39617 2px;
  118.     -moz-border-radius: 8px;
  119.     -ms-border-radius: 8px;
  120.     -o-border-radius: 8px;
  121.     -webkit-border-radius: 8px;
  122.     border-radius: 8px;
  123.     font-weight:600;
  124.     border-bottom-right-radius: 0px;
  125.     border-bottom-left-radius: 0px;
  126. }
  127. #Stylesidtab:hover {
  128.     color: #fff;
  129.     background-color: #ef007b;
  130.     border: solid #ef007b 2px;
  131. }
  132. #WorldAccentsidtab {
  133.     padding-top: 5px;
  134.     margin-right: 3px; 
  135.     float: left;
  136.     list-style: none;
  137.     font: 13px Arial, Helvetica, sans-serif;
  138.     color: #000;
  139.     width: 120px;
  140.     height: 25px;
  141.     text-align:center;
  142.     background-color: #f39617;
  143.     border: solid #f39617 2px;
  144.     -moz-border-radius: 8px;
  145.     -ms-border-radius: 8px;
  146.     -o-border-radius: 8px;
  147.     -webkit-border-radius: 8px;
  148.     border-radius: 8px;
  149.     font-weight:600;
  150.     border-bottom-right-radius: 0px;
  151.     border-bottom-left-radius: 0px;
  152. }
  153. #WorldAccentsidtab:hover {
  154.     color: #fff;
  155.     background-color: #ef007b;
  156.     border: solid #ef007b 2px;
  157. }
  158. #ForeignLanguagesidtab {
  159.     padding-top: 5px;
  160.     margin-right: 3px; 
  161.     float: left;
  162.     list-style: none;
  163.     font: 12px Arial, Helvetica, sans-serif;
  164.     color: #000;
  165.     width: 125px;
  166.     height: 25px;
  167.     text-align:center;
  168.     background-color: #f39617;
  169.     border: solid #f39617 2px;
  170.     -moz-border-radius: 8px;
  171.     -ms-border-radius: 8px;
  172.     -o-border-radius: 8px;
  173.     -webkit-border-radius: 8px;
  174.     border-radius: 8px;
  175.     font-weight:600;
  176.     border-bottom-right-radius: 0px;
  177.     border-bottom-left-radius: 0px;
  178. }
  179. #ForeignLanguagesidtab:hover {
  180.     color: #fff;
  181.     background-color: #ef007b;
  182.     border: solid #ef007b 2px;
  183. }
  184. #ddmenu {
  185.     margin: 0;
  186.     margin-left: 0px;
  187.     padding: 0;
  188.     height:43px;
  189.     width:938px;
  190. }  
  191. #ddmenu li {   
  192.     float: left;
  193.     list-style: none;
  194.     font: 16px Arial, Helvetica, sans-serif;
  195. }
  196.  
  197. /* the following set width of seperate sub menu */
  198. #ulAgesid {
  199.     margin-top: 30px;
  200.     padding: 3px;
  201.     padding-top: 8px;
  202.     position: absolute;
  203.     visibility: hidden;
  204.     width: auto;
  205.     max-width: 520px;
  206.     min-width: 240px;
  207. }
  208. #ulAgesid li{
  209.     margin-top: 12px;
  210.     margin: 6px;
  211. }
  212. #ulStylesid {
  213.     margin-top: 30px;
  214.     padding: 3px;
  215.     padding-top: 8px;
  216.     position: absolute;
  217.     visibility: hidden;
  218.     width: auto;
  219.     max-width: 520px;
  220.     min-width: 200px;
  221. }
  222. #ulStylesid li{
  223.     margin-top: 12px;
  224.     margin: 6px;
  225. }
  226. #ulUKAccentsid {
  227.     margin-top: 30px;
  228.     padding: 3px;
  229.     padding-top: 8px;
  230.     position: absolute;
  231.     visibility: hidden;
  232.     width: auto;
  233.     max-width: 600px;
  234.     min-width: 200px;
  235. }
  236. #ulUKAccentsid li{
  237.     margin-top: 12px;
  238.     margin: 6px;
  239. }
  240. #ulWorldAccentsid {
  241.     margin-top: 30px;
  242.     padding: 3px;
  243.     padding-top: 8px;
  244.     position: absolute;
  245.     visibility: hidden;
  246.     width: auto;
  247.     max-width: 400px;
  248.     min-width: 250px;
  249. }
  250. #ulWorldAccentsid li{
  251.     margin-top: 12px;
  252.     margin: 6px;
  253. }
  254. #ulForeignLanguagesid {
  255.        margin-top: 30px;
  256.     padding: 3px;
  257.     padding-top: 8px;
  258.     position: absolute;
  259.     visibility: hidden;
  260.     width: auto;
  261.     max-width: 170px;
  262.     min-width: 150px;
  263. }
  264. #ulForeignLanguagesid li{
  265.     margin-top: 12px;
  266.     margin: 6px;
  267. }
  268. /* end width of sub menu */
  269.  
  270. /* settings for seperate elemnts of each sub menu */
  271. #ulForeignLanguagesid a {
  272.     width:auto;   
  273.     display: inline;
  274.     color: #000;
  275.     font-size: 11px;
  276.     padding: 3px 3px;
  277.     font-weight: 800;
  278.     background-color: #fff;
  279.     border: solid #ef007b 2px;
  280.     -moz-border-radius: 4px;
  281.     -ms-border-radius: 4px;
  282.     -o-border-radius: 4px;
  283.     -webkit-border-radius: 4px;
  284.     border-radius: 4px;
  285. }
  286. #ulWorldAccentsid a {
  287.     width:auto;
  288.     display: inline;
  289.     color: #000;
  290.     font-size: 11px;
  291.     padding: 3px 3px;
  292.     font-weight: 800;
  293.     background-color: #fff;
  294.     border: solid #ef007b 2px;
  295.     -moz-border-radius: 4px;
  296.     -ms-border-radius: 4px;
  297.     -o-border-radius: 4px;
  298.     -webkit-border-radius: 4px;
  299.     border-radius: 4px;
  300. }
  301.  #ulUKAccentsid a {
  302.     width:auto;
  303.     display: inline;
  304.     color: #000;
  305.     font-size: 11px;
  306.     padding: 3px 3px;
  307.     font-weight: 800;
  308.     background-color: #fff;
  309.     border: solid #ef007b 2px;
  310.     -moz-border-radius: 4px;
  311.     -ms-border-radius: 4px;
  312.     -o-border-radius: 4px;
  313.     -webkit-border-radius: 4px;
  314.     border-radius: 4px;
  315. }
  316. #ulStylesid a {
  317.     width:auto;
  318.     display: inline;
  319.     color: #000;
  320.     font-size: 11px;
  321.     padding: 3px 3px;
  322.     font-weight: 800;
  323.     background-color: #fff;
  324.     border: solid #ef007b 2px;
  325.     -moz-border-radius: 4px;
  326.     -ms-border-radius: 4px;
  327.     -o-border-radius: 4px;
  328.     -webkit-border-radius: 4px;
  329.     border-radius: 4px;
  330. }
  331. #ulAgesid a {
  332.     width:auto;
  333.     display: inline;
  334.     color: #000;
  335.     font-size: 11px;
  336.     padding: 3px 3px;
  337.     font-weight: 800;
  338.     background-color: #fff;
  339.     border: solid #ef007b 2px;
  340.     -moz-border-radius: 4px;
  341.     -ms-border-radius: 4px;
  342.     -o-border-radius: 4px;
  343.     -webkit-border-radius: 4px;
  344.     border-radius: 4px;
  345. }
  346. #ulForeignLanguagesid a:hover {
  347.     color: #f39617;
  348. }
  349. #ulWorldAccentsid a:hover {
  350.     color: #f39617;
  351. }
  352.  #ulUKAccentsid a:hover {
  353.     color: #f39617;
  354. }
  355. #ulStylesid a:hover {
  356.     color: #f39617;
  357. }
  358. #ulAgesid a:hover {
  359.     color: #f39617;
  360. }
  361.  
  362. @media all and (min-width:1500px){
  363. /* the following set width of seperate sub menu */
  364. #maintab {
  365.     padding-top: 5px;
  366.     margin-right: 3px; 
  367.     font: 14px Arial, Helvetica, sans-serif;
  368.     width: 131px;
  369.     height: 31px;
  370.     border: solid #f39617 2px;
  371.     -moz-border-radius: 8px;
  372.     -ms-border-radius: 8px;
  373.     -o-border-radius: 8px;
  374.     -webkit-border-radius: 8px;
  375.     border-radius: 8px;
  376.     font-weight:600;
  377.     border-bottom-right-radius: 0px;
  378.     border-bottom-left-radius: 0px;
  379. }
  380. #maintab:hover {
  381.     color: #fff;
  382.     background-color: #ef007b;
  383.     border: solid #ef007b 2px;
  384. }
  385.  
  386. #usatab {
  387.     padding-top: 5px;
  388.     margin-right: 3px; 
  389.     font: 13px Arial, Helvetica, sans-serif;
  390.     width: 131px;
  391.     height: 31px;
  392.     border: solid #f39617 2px;
  393.     -moz-border-radius: 8px;
  394.     -ms-border-radius: 8px;
  395.     -o-border-radius: 8px;
  396.     -webkit-border-radius: 8px;
  397.     border-radius: 8px;
  398.     font-weight:600;
  399.     border-bottom-right-radius: 0px;
  400.     border-bottom-left-radius: 0px;
  401. }
  402. #usatab:hover {
  403.     color: #fff;
  404.     background-color: #ef007b;
  405.     border: solid #ef007b 2px;
  406. }
  407. #UKAccentsidtab {
  408.     padding-top: 5px;
  409.     margin-right: 3px; 
  410.     font: 14px Arial, Helvetica, sans-serif;
  411.     width: 131px;
  412.     height: 31px;
  413.     border: solid #f39617 2px;
  414.     -moz-border-radius: 8px;
  415.     -ms-border-radius: 8px;
  416.     -o-border-radius: 8px;
  417.     -webkit-border-radius: 8px;
  418.     border-radius: 8px;
  419.     font-weight:600;
  420.     border-bottom-right-radius: 0px;
  421.     border-bottom-left-radius: 0px;
  422. }
  423. #UKAccentsidtab:hover {
  424.     color: #fff;
  425.     background-color: #ef007b;
  426.     border: solid #ef007b 2px;
  427. }
  428. #Agesidtab {
  429.     padding-top: 5px;
  430.     margin-right: 3px; 
  431.     font: 14px Arial, Helvetica, sans-serif;
  432.     width: 131px;
  433.     height: 31px;
  434.     border: solid #f39617 2px;
  435.     -moz-border-radius: 8px;
  436.     -ms-border-radius: 8px;
  437.     -o-border-radius: 8px;
  438.     -webkit-border-radius: 8px;
  439.     border-radius: 8px;
  440.     font-weight:600;
  441.     border-bottom-right-radius: 0px;
  442.     border-bottom-left-radius: 0px;
  443. }
  444. #Agesidtab:hover {
  445.     color: #fff;
  446.     background-color: #ef007b;
  447.     border: solid #ef007b 2px;
  448. }
  449. #Stylesidtab {
  450.     padding-top: 5px;
  451.     margin-right: 3px; 
  452.     font: 14px Arial, Helvetica, sans-serif;
  453.     width: 131px;
  454.     height: 31px;
  455.     border: solid #f39617 2px;
  456.     -moz-border-radius: 8px;
  457.     -ms-border-radius: 8px;
  458.     -o-border-radius: 8px;
  459.     -webkit-border-radius: 8px;
  460.     border-radius: 8px;
  461.     font-weight:600;
  462.     border-bottom-right-radius: 0px;
  463.     border-bottom-left-radius: 0px;
  464. }
  465. #Stylesidtab:hover {
  466.     color: #fff;
  467.     background-color: #ef007b;
  468.     border: solid #ef007b 2px;
  469. }
  470. #WorldAccentsidtab {
  471.     padding-top: 5px;
  472.     margin-right: 3px; 
  473.     font: 14px Arial, Helvetica, sans-serif;
  474.     width: 131px;
  475.     height: 31px;
  476.     border: solid #f39617 2px;
  477.     -moz-border-radius: 8px;
  478.     -ms-border-radius: 8px;
  479.     -o-border-radius: 8px;
  480.     -webkit-border-radius: 8px;
  481.     border-radius: 8px;
  482.     font-weight:600;
  483.     border-bottom-right-radius: 0px;
  484.     border-bottom-left-radius: 0px;
  485. }
  486. #WorldAccentsidtab:hover {
  487.     color: #fff;
  488.     background-color: #ef007b;
  489.     border: solid #ef007b 2px;
  490. }
  491. #ForeignLanguagesidtab {
  492.     padding-top: 5px;
  493.     margin-right: 3px; 
  494.     font: 13px Arial, Helvetica, sans-serif;
  495.     width: 131px;
  496.     height: 31px;
  497.     border: solid #f39617 2px;
  498.     -moz-border-radius: 8px;
  499.     -ms-border-radius: 8px;
  500.     -o-border-radius: 8px;
  501.     -webkit-border-radius: 8px;
  502.     border-radius: 8px;
  503.     font-weight:600;
  504.     border-bottom-right-radius: 0px;
  505.     border-bottom-left-radius: 0px;
  506. }
  507. #ForeignLanguagesidtab:hover {
  508.     color: #fff;
  509.     background-color: #ef007b;
  510.     border: solid #ef007b 2px;
  511. }
  512. #ddmenu {
  513.     margin: 0;
  514.     margin-left: 0px;
  515.     padding: 0;
  516.     height:43px;
  517.     width:1200px;
  518. }  
  519.  
  520.  
  521.  
  522.  
  523.  
  524.  
  525.  
  526. #ulAgesid {
  527.     padding: 5px;
  528.     padding-top: 15px;
  529.     max-width: 620px;
  530.     min-width: 240px;
  531. }
  532. #ulAgesid li{
  533.     margin-top: 15px;
  534.     margin: 10px;
  535. }
  536. #ulStylesid {
  537.     padding: 5px;
  538.     padding-top: 15px;
  539.     max-width: 720px;
  540.     min-width: 200px;
  541. }
  542. #ulStylesid li{
  543.     margin-top: 15px;
  544.     margin: 10px;
  545. }
  546. #ulUKAccentsid {
  547.     padding: 5px;
  548.     padding-top: 15px;
  549.     max-width: 600px;
  550.     min-width: 200px;
  551. }
  552. #ulUKAccentsid li{
  553.     margin-top: 15px;
  554.     margin: 10px;
  555. }
  556. #ulWorldAccentsid {
  557.     padding: 5px;
  558.     padding-top: 15px;
  559.     max-width: 650px;
  560.     min-width: 550px;
  561. }
  562. #ulWorldAccentsid li{
  563.     margin-top: 15px;
  564.     margin: 10px;
  565. }
  566. #ulForeignLanguagesid {
  567.     padding: 5px;
  568.     padding-top: 15px;
  569.     max-width: 500px;
  570.     min-width: 200px;
  571. }
  572. #ulForeignLanguagesid li{
  573.     margin-top: 15px;
  574.     margin: 10px;
  575. }
  576. /* end width of sub menu */
  577.  
  578. /* settings for seperate elemnts of each sub menu */
  579. #ulForeignLanguagesid a {
  580.     margin-left: -10px;
  581.     font-size: 13px;
  582.     padding: 6px 6px;
  583.     border: solid #ef007b 2px;
  584.     -moz-border-radius: 5px;
  585.     -ms-border-radius: 5px;
  586.     -o-border-radius: 5px;
  587.     -webkit-border-radius: 5px;
  588.     border-radius: 5px;
  589. }
  590. #ulWorldAccentsid a {
  591.     margin-left: -10px;
  592.     font-size: 13px;
  593.     padding: 6px 6px;
  594.     border: solid #ef007b 2px;
  595.     -moz-border-radius: 5px;
  596.     -ms-border-radius: 5px;
  597.     -o-border-radius: 5px;
  598.     -webkit-border-radius: 5px;
  599.     border-radius: 5px;
  600. }
  601.  #ulUKAccentsid a {
  602.     margin-left: -10px;
  603.     font-size: 13px;
  604.     padding: 6px 6px;
  605.     border: solid #ef007b 2px;
  606.     -moz-border-radius: 5px;
  607.     -ms-border-radius: 5px;
  608.     -o-border-radius: 5px;
  609.     -webkit-border-radius: 5px;
  610.     border-radius: 5px;
  611. }
  612. #ulStylesid a {
  613.     margin-left: -10px;
  614.     font-size: 13px;
  615.     padding: 6px 6px;
  616.     border: solid #ef007b 2px;
  617.     -moz-border-radius: 5px;
  618.     -ms-border-radius: 5px;
  619.     -o-border-radius: 5px;
  620.     -webkit-border-radius: 5px;
  621.     border-radius: 5px;
  622. }
  623. #ulAgesid a {
  624.     margin-left: -10px;
  625.     font-size: 13px;
  626.     padding: 6px 6px;
  627.     border: solid #ef007b 2px;
  628.     -moz-border-radius: 5px;
  629.     -ms-border-radius: 5px;
  630.     -o-border-radius: 5px;
  631.     -webkit-border-radius: 5px;
  632.     border-radius: 5px;
  633. }
  634. }
  635.  
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

http://www.yaketyyak.co.uk/newpages/...A/Mid-Atlantic

thanks
Mar 28 '13 #1
Share this Question
Share on Google+
2 Replies


100+
P: 347
i have figured this out the container for the sub menu in ie needs to have a background colour so the following

Expand|Select|Wrap|Line Numbers
  1.  #ulAgesid {
  2.     margin-top: 30px;
  3.     padding: 3px;
  4.     padding-top: 8px;
  5.     position: absolute;
  6.     visibility: hidden;
  7.     width: auto;
  8.     max-width: 520px;
  9.     min-width: 240px;
  10. }
needs a background colour???
Apr 2 '13 #2

Rabbit
Expert Mod 10K+
P: 12,430
So what happened when you added a background-color: black;?
Apr 2 '13 #3

Post your reply

Sign in to post your reply or Sign up for a free account.