Jump to content
PollyAplin

Drop down menu broken in IE

Recommended Posts

I used this tutorial video to make a horizontal drop down css menu.

Only problem is that it doesn't show at all in IE annd i can't find any fixes that well, fix it!Any help would be much appreciated!

Share this post


Link to post
Share on other sites

Can you post code and a link to the page so we have something to go on?

Share this post


Link to post
Share on other sites
Can you post code and a link to the page so we have something to go on?
Sure,HTML:<div id="menubx"><div id="navMenu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html">Company</a> <ul> <li><a href="profile.html" border="0" target=Main>Profile</a></li> <li><a href="meettheteam.html" border="0" target=Main> Meet the Team</a></li> <li><a href="News.html" border="0" target=_top>News</a></li> <li><a href="downloads.html" border="0" target=Main>Downloads</a></li> <li><a href="careers.html" border="0" target=Main>Careers with KIGG</a></li> <li><a href="contact.html" border="0" target=Main>Contact</a></li> </ul> <!--End inner UL Company--> </li> <li><a href="factoryhub.html" border="0" target=Main>Factory Start-Ups</a> <ul> <li><a href="energyelecmeter.html" border="0" target=Main>Energy / Electricity Meter</a></li> <li><a href="watermeter.html" border="0" target=Main>Flow Meter</a></li> <li><a href="others.html" border="0" target=Main>Other Start-Up Options</a></li> </ul> <!--End inner UL Factory--> </li> <li><a href="productshub.html" border="0" target=Main>Products</a> <ul> <li><a href="FTIII.html" border="0" target=Main>Energy Meter Testing</a></li> <li><a href="GHGA.html" border="0" target=Main>GHGA</a></li> <li><a href="Smartmetering.html" border="0" target=Main>Smart Metering</a></li> <li><a href="Carbonfootprint.html" border="0" target=Main>Carbon Footprint</a></li> <li><a href="WABI.html" border="0" target=Main>WABI</a></li> <li><a href="measurecontauto.html" border="0" target=Main>Measurement/Control </a></li> <li><a href="testterminalblock.html" border="0" target=Main>Test Terminal Block</a></li> </ul> <!--End inner UL Products--> </li> <li><a href="randdhub.html" border="0" target=Main>R&D</a> <ul> <li><a href="customdesign.html" border="0" target=Main>Custom Design</a></li> <li><a href="energydesign.html" border="0" target=Main>Energy Meter Design</a></li> <li><a href="carbon.html" border="0" target=Main>Carbon Measurement</a></li> <li><a href="equiptest.html" border="0" target=Main>Communications</a></li> </ul> <!--End inner UL R&D--> <li><a href="Labcalibrationhub.html" border="0" target=Main>Lab / Calibration</a> <ul> <li><a href="calibrationservices.html" border="0" target=Main>Calibration Services</a></li> <li><a href="testingandcert.html" border="0" target=Main>Testing & Certifications</a></li> </ul> <!--End inner UL Lab--> <li><a href="services.html" border="0" target=Main>Services</a></li> <li><a class="ecohealth" href="br.html" border="0" target=Main>Environment & Health</a></li> <!--This opens BR info in your main website content window--> </li> </ul> <!--End Main UL--><br class="clearFloat"</></div> <!--End navMenu--></div> <!--End Menubx-->CSS#Menubx{ width:1072px; height:70px; background:#fff; position:absolute; padding:0; margin-top:230px; text-align:center; z-index:35;}#navMenu{ Margin:0; Padding:0; width:1072px; }#navMenu ul{ Margin:0; Padding:0; line-height:30px;}#navMenu li{ Margin:0; Padding:0; list-style:none; Float:left; position:relative; background:#BEDAE0;}#navMenu ul li a{ padding:0; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:30px; width:150px; display:block; color:#00539b; border-top: 1px solid #fff; border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-left:2px solid #fff;}#navMenu ul ul{ position:absolute; visibility:hidden; top:30px; }#navMenu ul li:hover ul{ visibility:visible; }/**************************************************************/#navMenu li:hover{ background:#09F; }#navMenu ul li:hover ul li a:hover{ background:#09F; color:#FFF;}#navmenu a:hover{ color:#FFF;}

Share this post


Link to post
Share on other sites

you need to validate your code at http://validator.w3.org/, there are numerouse errorsno border attribute in <a>target=Main? do you mean _self?, also place within quotes<br class="clearFloat"</> should be <br class="clearFloat"/>missing </li> under </ul> <!--End inner UL R&D--> and also </ul> <!--End inner UL Lab--><Extra </li> before last </ul> also Padding: and Margin: should be lowercaseand finally replace all & with &after these correction it should work in all browsers.

Share this post


Link to post
Share on other sites
you need to validate your code at http://validator.w3.org/, there are numerouse errorsno border attribute in <a>target=Main? do you mean _self?, also place within quotes<br class="clearFloat"</> should be <br class="clearFloat"/>missing </li> under </ul> <!--End inner UL R&D--> and also </ul> <!--End inner UL Lab--><Extra </li> before last </ul> also Padding: and Margin: should be lowercaseand finally replace all & with &after these correction it should work in all browsers.
wow, thank you very much!

Share this post


Link to post
Share on other sites
you need to validate your code at http://validator.w3.org/, there are numerouse errorsno border attribute in <a>target=Main? do you mean _self?, also place within quotes<br class="clearFloat"</> should be <br class="clearFloat"/>missing </li> under </ul> <!--End inner UL R&D--> and also </ul> <!--End inner UL Lab--><Extra </li> before last </ul> also Padding: and Margin: should be lowercaseand finally replace all & with &after these correction it should work in all browsers.
I just implemented these changes...and my drop down menu disappeared...does this mean the menu isn't valid??

Share this post


Link to post
Share on other sites

did you use link to validate your page, did it come up with red warning about errors found, or green for a validated page. are you using a doctype at all? such as <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">EDIT when you say IE which version are we talking about? just to clarify.

Edited by dsonesuk

Share this post


Link to post
Share on other sites
#main li {	display: block;	position: relative;	float: left;	width: 84px;}#main li.topLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 0.7em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 92px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;}#main li .nestedList {	position: absolute;	top: 28px;	left: 2px;	display: none;	list-style-type: none;	width: 84px;	height: 25px;}#main li:hover .nestedList {	display: block;}#main li.subLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 1em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 200px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;	z-index: 1;}

HTML:

<ul id='main'>	  <li class="topLevel"><a href="../index.html">Home</a>	  <ul class="nestedList">	  <li class="subLevel"><a href="../contact-us.html">Contact Us</a></li>	  <li class="subLevel"><a href="../about-us.html">About Us</a></li>	  <li class="subLevel">Donate</li>   </ul></li>

You will need to edit this to fit your own needs, but it demonstrates how to use the "Nested List" within the main top level menus. To add extra top levels, just copy the <li class="topLevel">, not the <ul id="main">.I am using XHTML 1 Transistional. But note, this still won't work in IE6 or earlier.Mark.P.S. Do especially note the use of Display: none rather than Visibility: hidden. The visibility: hidden will leave a blank section in your page, whilst display: none will effectively remove it altogether, only to appear when hovered.

Share this post


Link to post
Share on other sites
#main li {	display: block;	position: relative;	float: left;	width: 84px;}#main li.topLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 0.7em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 92px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;}#main li .nestedList {	position: absolute;	top: 28px;	left: 2px;	display: none;	list-style-type: none;	width: 84px;	height: 25px;}#main li:hover .nestedList {	display: block;}#main li.subLevel {	position: relative;	font-family: Arial, Helvetica, sans-serif;	font-size: 1em;	font-weight: bolder;	color: #F90;	display: block;	float: left;	height: 25px;	width: 200px;	list-style-type: none;	text-align: center;	border: medium ridge #CCC;	line-height: 25px;	background-color: #666;	z-index: 1;}

HTML:

<ul id='main'>	  <li class="topLevel"><a href="../index.html">Home</a>	  <ul class="nestedList">	  <li class="subLevel"><a href="../contact-us.html">Contact Us</a></li>	  <li class="subLevel"><a href="../about-us.html">About Us</a></li>	  <li class="subLevel">Donate</li>   </ul></li>

You will need to edit this to fit your own needs, but it demonstrates how to use the "Nested List" within the main top level menus. To add extra top levels, just copy the <li class="topLevel">, not the <ul id="main">.I am using XHTML 1 Transistional. But note, this still won't work in IE6 or earlier.Mark.P.S. Do especially note the use of Display: none rather than Visibility: hidden. The visibility: hidden will leave a blank section in your page, whilst display: none will effectively remove it altogether, only to appear when hovered.

Thanks for this but even this menu doesn't work in IE for me. I don't know what the ###### is wrong with the website i'm building...

Share this post


Link to post
Share on other sites

heres how it should work with ie6 fix. had to adjust font-size, and li element to fit total width of div container.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>http://w3schools.invisionzone.com/index.php?amp;showtopic=33988&pid=186664&st=0&#entry186664</title><!--required for ie6*--><script type="text/javascript">/*<![CDATA[*//*---->*/sfHover = function() {var sfEls = document.getElementById("navMenu").getElementsByTagName("LI");for (var i=0; i<sfEls.length; i++) {sfEls[i].onmouseover=function() {this.className+=" sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp(" sfhover\\b"), "");}}}if (window.attachEvent) window.attachEvent("onload", sfHover);/*--*//*]]>*/</script><style type="text/css">#Menubx{width:1072px;height:70px;background:#fff;position:absolute;padding:0;margin-top:230px;text-align:center;z-index:35;}#navMenu{margin:0;padding:0;width:1072px;}#navMenu ul{margin:0;padding:0;line-height:30px;}#navMenu li{margin:0;padding:0;list-style:none;float:left;position:relative;background:#BEDAE0;}#navMenu ul li a{padding:0;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:11px;text-decoration:none;height:30px;width:130px;display:block;color:#00539b;border-top: 1px solid #fff;border-right: 1px solid #fff;border-bottom: 1px solid #fff;border-left:2px solid #fff;}#navMenu ul ul{position:absolute;visibility:hidden;top:30px;width:130px;/*required for ie6*/}#navMenu ul li:hover ul, #navMenu ul li.sfhover ul/*required for ie6*/{visibility:visible;}/**************************************************************/#navMenu li:hover, #navMenu li.sfhover/*required for ie6*/{background:#09F;}#navMenu ul li:hover ul li a:hover, #navMenu ul li.sfhover ul li a:hover/*required for ie6*/{background:#09F;color:#FFF;}#navmenu a:hover{color:#FFF;}</style></head><body><div id="menubx"><div id="navMenu"><ul><li><a href="index.html">Home</a></li><li><a href="index.html">Company</a><ul><li><a href="profile.html" target="Main">Profile</a></li><li><a href="meettheteam.html" target="Main"> Meet the Team</a></li><li><a href="News.html" target="_top">News</a></li><li><a href="downloads.html" target="Main">Downloads</a></li><li><a href="careers.html" target="Main">Careers with KIGG</a></li><li><a href="contact.html" target="Main">Contact</a></li></ul> <!--End inner UL Company--></li><li><a href="factoryhub.html" target="Main">Factory Start-Ups</a><ul><li><a href="energyelecmeter.html" target="Main">Energy / Electricity Meter</a></li><li><a href="watermeter.html" target="Main">Flow Meter</a></li><li><a href="others.html" target="Main">Other Start-Up Options</a></li></ul> <!--End inner UL Factory--></li><li><a href="productshub.html" target="Main">Products</a><ul><li><a href="FTIII.html" target="Main">Energy Meter Testing</a></li><li><a href="GHGA.html" target="Main">GHGA</a></li><li><a href="Smartmetering.html" target="Main">Smart Metering</a></li><li><a href="Carbonfootprint.html" target="Main">Carbon Footprint</a></li><li><a href="WABI.html" target="Main">WABI</a></li><li><a href="measurecontauto.html" target="Main">Measurement/Control </a></li><li><a href="testterminalblock.html" target="Main">Test Terminal Block</a></li><li><a href="FTIII.html" target="Main">Energy Meter Testing</a></li><li><a href="GHGA.html" target="Main">GHGA</a></li><li><a href="Smartmetering.html" target="Main">Smart Metering</a></li><li><a href="Carbonfootprint.html" target="Main">Carbon Footprint</a></li><li><a href="WABI.html" target="Main">WABI</a></li><li><a href="measurecontauto.html" target="Main">Measurement/Control </a></li><li><a href="testterminalblock.html" target="Main">Test Terminal Block</a></li></ul> <!--End inner UL Products--></li><li><a href="randdhub.html" target="Main">R&D</a><ul><li><a href="customdesign.html" target="Main">Custom Design</a></li><li><a href="energydesign.html" target="Main">Energy Meter Design</a></li><li><a href="carbon.html" target="Main">Carbon Measurement</a></li><li><a href="equiptest.html" target="Main">Communications</a></li></ul> <!--End inner UL R&D--></li><li><a href="Labcalibrationhub.html" target="Main">Lab / Calibration</a><ul><li><a href="calibrationservices.html" target="Main">Calibration Services</a></li><li><a href="testingandcert.html" target="Main">Testing & Certifications</a></li></ul> <!--End inner UL Lab--></li><li><a href="services.html" target="Main">Services</a></li><li><a class="ecohealth" href="br.html" target="Main">Environment & Health</a></li> <!--This opens BR info in your main website content window--></ul> <!--End Main UL--><br class="clearFloat"/></div> <!--End navMenu--></div> <!--End Menubx--></body></html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...