dmccabe Posted June 3, 2008 Share Posted June 3, 2008 Let me start by admitting I am not the greatest web designer ever. I have been following this little tutorial to create CSS based drop down menu's http://www.alistapart.com/articles/horizdropdowns All working fine, apart from in IE. The sub-menu's do not appear, but do in Firefox. There is a section in the tutorial that says it is a fix for IE using a little bit of JS, however where does this go? OK, OK, so that darn IE/Win has to ruin everything and not do as it’s told. IE/Win only allows the :hover pseudo-class to be applied to a link — so the li:hover that makes the sub-menus appear means nothing to IE. A tiny jot of JavaScript is required to kick IE back into action (line wraps marked » — Ed.): startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace» (" over", ""); } } } } } window.onload=startList; I just cant figure out where to put that in my code? Quote Link to comment Share on other sites More sharing options...
dmccabe Posted June 4, 2008 Author Share Posted June 4, 2008 Can anyone help please? Quote Link to comment Share on other sites More sharing options...
mithras Posted June 6, 2008 Share Posted June 6, 2008 You can place it anywhere, but it should be interpreted as javascript. You should have an element with id "nav" and in that element you should have several list elements (li's) for drop-down's which won't work in IE. There are four possible options: directly in your html file or in an external file. You can also place it into you head or body from the html file. <html> <head> <script> //You can place it here.... </script> <script src="script.js" type="text/javascript"></script> //Or place it in the external file script.js </head> <body> <div id="nav"> <ul><li>a</li></ul> </div> <script> //You can place it here.... </script> <script src="script.js" type="text/javascript"></script> //Or place it in the external file script.js </body> </html> The better is to place it in an external file, because browsers can cache the script easy. Furthermore you better place the script tag at the end in your body. Browsers interpret the html and let the client view the content already. At the end they see a script and will download it. If you place it in your head, the browser must do by each page request another (http) request for the script. After that script request the browser can render the html. So: the best option is to place a <script src="here_your_script.js"></script> tag at the end in your body of the html. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.