Grow your CSS skills. Land your dream job.

Drop Down Menus problem in IE browser!!

  • # February 6, 2009 at 2:11 am

    Dear friends!!!

    my menus drop down was not work in IE browser!! please help me !! i don’t very well in CSS, corresponding css codings are copied in another site !! i m not coded, but modified myself style of code. Please find out my error and fix my error ASAP!!!

    Help Me!!! I am new one !!!

    Note :
    I have attached in Error – Coding files (include HTML, CSS & images)

    /* HTML code */

    /* CSS Code */

    Code:

    /* dflt */

    html, body {font-family:”Lucida Sans Unicode”,”Lucida Grande”,Verdana,Arial,Helvetica,sans-serif;}

    /* menu */

    ul#topnav {height:40px; margin:0; padding:0; top:auto; left:auto; position:absolute;}
    ul#topnav li {float:left; list-style-type:none; background-image:url(../images/but_all_bg.jpg);}
    ul#topnav li a {display:block; text-decoration:none; }
    ul#topnav li a:link {text-decoration:none;}
    ul#topnav li a:visited {text-decoration:none;}
    ul#topnav li a:hover {text-decoration:none;}
    ul#topnav li a:active {text-decoration:none;}

    ul#topnav .menu {top:40px; position:absolute; background:url(../images/bg_subnav.jpg) repeat-x bottom left #0050A0; padding:4px 0 12px 10px;}

    ul#topnav .menu ul.sub_nav {float:left;}
    ul#topnav .menu ul.sub_nav {margin:0 10px 0 0; padding:0; width:130px;}
    ul#topnav .menu ul.sub_nav li {float:none; background-image:none;}
    ul#topnav .menu ul.sub_nav li a, ul#topnav .menu ul.sub_nav li a:link, ul#topnav .menu ul.sub_nav li a:visited {font-size:12px; font-weight:normal; line-height:1.3em; color:#fff; text-decoration:none; padding:4px 6px; height:100%; background-color:transparent;}
    ul#topnav .menu ul.sub_nav li a:hover {color:#fff; text-decoration: none; background-color:#AF1400; }
    ul#topnav .menu ul.sub_nav li a:active {color:#fff; text-decoration: none; background-color:transparent;}

    ul#topnav li .menu {display:none;}
    ul#topnav li:hover .menu {display:block;}
    ul#topnav li.over .menu {display:block; width:200px;; height:1%;}
    ul#topnav a.nav_item span {position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}

    li.nav_about {background-position:0px 0px;}
    li.nav_about:hover, li.nav_about_over {background-position:-0px -80px;}
    li.nav_about a.nav_item, li.nav_about_over a.nav_item {width:140px; height:40px;}
    li.nav_about .menu {left:0; min-width:160px}

    li.nav_program {background-position:-141px 0;}
    li.nav_program:hover, li.nav_program_over {background-position:-141px -80px;}
    li.nav_program a.nav_item, li.nav_program_over a.nav_item {width:145px; height:40px;}
    li.nav_program div.menu {left:141px; min-width:160px}

    li.nav_com {background-position:-286px 0;}
    li.nav_com:hover, li.nav_com_over {background-position:-286px -80px;}
    li.nav_com a.nav_item, li.nav_com_over a.nav_item {width:145px; height:40px;}
    li.nav_com div.menu {left:286px; min-width:160px}

    li.nav_photo {background-position:-431px 0;}
    li.nav_photo:hover, li.nav_photo_over {background-position:-431px -80px;;}
    li.nav_photo a.nav_item, li.nav_photo_over a.nav_item {width:155px; height:40px;}
    li.nav_photo div.menu {left:431px; min-width:160px}

    li.nav_contact {background-position:-586px 0;}
    li.nav_contact:hover, li.nav_contact_over {background-position:-586px -80px;;}
    li.nav_contact a.nav_item, li.nav_contact_over a.nav_item {width:145px; height:40px;}
    li.nav_contact div.menu {right:586px; min-width:160px}

    li.nav_donate {background-position:-731px 0;}
    li.nav_donate:hover, li.nav_donate_over {background-position:-731px -80px;;}
    li.nav_donate a.nav_item, li.nav_donate_over a.nav_item {width:200px; height:40px;}

    # February 7, 2009 at 3:49 am
    "kpjothi" wrote:
    Dear friends!!!

    my menus drop down was not work in IE browser!! please help me !! i don’t very well in CSS, corresponding css codings are copied in another site !! i m not coded, but modified myself style of code. Please find out my error and fix my error ASAP!!!

    Help Me!!! I am new one !!!

    Note :
    I have attached in Error – Coding files (include HTML, CSS & images)

    asking us to fix your problem ASAP!!! probably wont help you getting the help you want. Asking nicely probably will get you quicker help, and more help.

    in your HTML have you got:

    Code:

    links to the site would also help, as we can then test in our browsers, to see exactly what you mean

    # February 9, 2009 at 6:52 am

    This is my code. Please Help Me!!!!!!

    HTML code

    CSS code

    Code:
    html, body {font-family:”Lucida Sans Unicode”,”Lucida Grande”,Verdana,Arial,Helvetica,sans-serif;}

    /* menu */

    ul#topnav {height:40px; margin:0; padding:0; top:auto; left:auto; position:absolute;}
    ul#topnav li {float:left; list-style-type:none; background-image:url(../images/but_all_bg.jpg);}
    ul#topnav li a {display:block; text-decoration:none; }
    ul#topnav li a:link {text-decoration:none;}
    ul#topnav li a:visited {text-decoration:none;}
    ul#topnav li a:hover {text-decoration:none;}
    ul#topnav li a:active {text-decoration:none;}

    ul#topnav .menu {top:40px; position:absolute; background:url(../images/bg_subnav.jpg) repeat-x bottom left #0050A0; padding:4px 0 12px 10px;}

    ul#topnav .menu ul.sub_nav {float:left;}
    ul#topnav .menu ul.sub_nav {margin:0 10px 0 0; padding:0; width:130px;}
    ul#topnav .menu ul.sub_nav li {float:none; background-image:none;}
    ul#topnav .menu ul.sub_nav li a, ul#topnav .menu ul.sub_nav li a:link, ul#topnav .menu ul.sub_nav li a:visited {font-size:12px; font-weight:normal; line-height:1.3em; color:#fff; text-decoration:none; padding:4px 6px; height:100%; background-color:transparent;}
    ul#topnav .menu ul.sub_nav li a:hover {color:#fff; text-decoration: none; background-color:#AF1400; }
    ul#topnav .menu ul.sub_nav li a:active {color:#fff; text-decoration: none; background-color:transparent;}

    ul#topnav li .menu {display:none;}
    ul#topnav li:hover .menu {display:block;}
    ul#topnav li.over .menu {display:block; width:200px;; height:1%;}
    ul#topnav a.nav_item span {position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}

    li.nav_about {background-position:0px 0px;}
    li.nav_about:hover, li.nav_about_over {background-position:-0px -80px;}
    li.nav_about a.nav_item, li.nav_about_over a.nav_item {width:140px; height:40px;}
    li.nav_about .menu {left:0; min-width:160px}

    li.nav_program {background-position:-141px 0;}
    li.nav_program:hover, li.nav_program_over {background-position:-141px -80px;}
    li.nav_program a.nav_item, li.nav_program_over a.nav_item {width:145px; height:40px;}
    li.nav_program div.menu {left:141px; min-width:160px}

    li.nav_com {background-position:-286px 0;}
    li.nav_com:hover, li.nav_com_over {background-position:-286px -80px;}
    li.nav_com a.nav_item, li.nav_com_over a.nav_item {width:145px; height:40px;}
    li.nav_com div.menu {left:286px; min-width:160px}

    li.nav_photo {background-position:-431px 0;}
    li.nav_photo:hover, li.nav_photo_over {background-position:-431px -80px;;}
    li.nav_photo a.nav_item, li.nav_photo_over a.nav_item {width:155px; height:40px;}
    li.nav_photo div.menu {left:431px; min-width:160px}

    li.nav_contact {background-position:-586px 0;}
    li.nav_contact:hover, li.nav_contact_over {background-position:-586px -80px;;}
    li.nav_contact a.nav_item, li.nav_contact_over a.nav_item {width:145px; height:40px;}
    li.nav_contact div.menu {right:586px; min-width:160px}

    li.nav_donate {background-position:-731px 0;}
    li.nav_donate:hover, li.nav_donate_over {background-position:-731px -80px;;}
    li.nav_donate a.nav_item, li.nav_donate_over a.nav_item {width:200px; height:40px;}

    # February 9, 2009 at 7:10 am
    "kpjothi" wrote:
    This is my code. Please Help Me!!!!!!

    help with what?

    you never explained your problem, all your asking for is us to fix your "problem" ASAP, how can someone fix something when they don’t know what is broke.

    but you dont have drop downs at all, you have, however, un-ordered list items

    # February 9, 2009 at 7:37 am

    above my coding was not support in IE browser !!! then how to coding ? how to change my coding ?

    # February 9, 2009 at 8:50 am
    "kpjothi" wrote:
    above my coding was not support in IE browser !!! then how to coding ? how to change my coding ?

    which IE?

    and it seems to work in IE6, 7, & 8 on my machine working with your code

    # February 10, 2009 at 12:14 am

    IE 6,7 & 8 also…………

    # February 10, 2009 at 8:56 am
    "kpjothi" wrote:
    IE 6,7 & 8 also…………

    I think your looking for a CSS drop down on hover menu system?
    http://www.cssplay.co.uk/menus/

    # February 17, 2009 at 5:17 am

    please correct my coding please help me!!!!!!!!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".