Hey Guys, I need this code to work in IE 6. Someone has suggested this but it didnt work for me: http://www.xs4all.nl/~peterned/csshover.html Here's the css: @charset "utf-8"; html { color:#444444; font-family:'Lucida Grande',Verdana,sans-serif; font-size:10px; font-style:normal; font-variant:normal; font-weight:normal; line-height:1.4; } body { background-color: #d1c2a9; } .test { } body { background-image: url(../images/bgnd.png); background-repeat: repeat-x; margin: 0px; padding: 0px; } #wrapper { width: 982px; position: relative; left: 50%; margin-left: -491px; } #logo { width: 241px; float: left; position: relative; height: 1040px; } #main { width: 700px; float: right; } #nav { float: right; padding-right: 30px; } #top { height: 63px; } #nav li {position: relative;} #nav ul { margin: 0px; padding: 0px; list-style-type: none; float: left; background-image: url(../images/nav-bgnd.png); width: 531px; height: 30px; text-align: center; } #nav ul ul{ font: bold 11px/16px arial, helvetica, sans-serif; display: block; float: right; margin: 0; background-image: none; padding: 2px 3px; position: absolute; top: 63; } #nav ul ul li{ //width: 6em; //position: absolute; display: block; } #nav ul li { float: left; width: 12em; position: relative; display: block; } #nav h2 { //font: bold 11px/16px arial, helvetica, sans-serif; float: left; color: #FFFFFF; text-decoration: none; height: 26px; line-height: 25px; font-size: 17px; font-family: Georgia, "Times New Roman", Times, serif; display: block; border-width: 1px; border-style: solid; //border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #nav ul ul a{ display: block; float: left; color: #FFFFFF; text-decoration: none; height: 26px; line-height: 25px; font-size: 17px; font-family: Georgia, "Times New Roman", Times, serif; padding-left: 34px; padding-right: 34px; //background-image: url(../images/nav-divider.png); //background-repeat: no-repeat; //background-position: left center; } /*ul a:hover { text-decoration: underline; }*/ #plane-red { position: relative; padding-top: 4px; height: 82px; width: 78px; } #plane-blue { position: absolute; left: 850px; top: 100px; zindex: 500; } .welcome { background-image: url(../images/welcome.png); height: 44px; width: 565px; background-repeat: no-repeat; text-indent: -5555px; } #main-text { width: 664px; } #footer { width: 199px; margin-right: auto; margin-left: auto; } #footer img { margin: 0px; padding: 0px; float: right; } #main-text p { font-family: Verdana, Arial, Helvetica, sans-serif; color: #605e5d; font-size: 1em; font-size:1.4em; letter-spacing:0pt; line-height:1.2em; text-align:left; text-decoration:none; word-spacing:normal; margin-bottom: 20px; } #main-text img { float: right; margin-right: 30px; margin-left: 15px; margin-top: -20px; margin-bottom: 15px; } #footer p { background-repeat: no-repeat; line-height: 30px; width: 160px; background-position: right; color:#666666; margin: 0px; float: left; } /* ul a { display: block; float: left; color: #FFFFFF; text-decoration: none; height: 26px; line-height: 25px; font-size: 17px; font-family: Georgia, "Times New Roman", Times, serif; padding-left: 34px; padding-right: 34px; background-image: url(../images/nav-divider.png); background-repeat: no-repeat; background-position: left center; }*/ img { border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } /* ul .first a { background-image: none; }*/ #main-text h1 { font-family: "Times New Roman", Times, serif; font-size: 35px; color: #04aeec; margin-top: 15px; } .right { float: right; } /*---------------------------------------------------------------------------------------------*/ #menu { width: 631px; float: right; background-image: url(../images/nav-bgnd.png); background-repeat: no-repeat; background-position: left center; height: 30px; text-align: center; padding-right: 30px; } #menu ul { list-style: none; margin: 0; padding: 0; //width: 531px; float: left; } #menu a, #menu h2 { //font: bold 12px/16px arial, helvetica, sans-serif; display: block; margin: 0; padding: 2px 3px; font-size: 14px; //height: 23px; line-height: 23px; font-family: Georgia, "Times New Roman", Times, serif; } #menu .first h2{ background-image: none; padding-right: 34px; padding-left: 34px; } #menu .first ul { //padding-left: 20px; padding-right: 1px; margin-left: 20px; width: 89%; } #menu .first ul ul { margin-left: -1px; } menu.first ul ul ul {} #menu h2 { color: #FFF; //text-transform: uppercase; padding-left: 34px; padding-right: 34px; //padding-bottom: 20px; background-image: url(../images/nav-divider.png); background-repeat: no-repeat; background-position: left center; } #menu a { left: -1; color: #c03; background: #eee; text-decoration: none; border: 1px; border-top: 1px; border-style: solid; border-color: #000; } #menu a:hover { color: #a00; //background: #fff; } #menu li {position: relative;} #menu ul ul ul { position: absolute; left: 100%; //top: 3%; top: 1px; height: 100px; border: 0px; //border-top: 0px; //border-left: 0px; border-style: solid; border-color: #000; margin-left: -1px; } #menu ul ul { position: absolute; align: center; top: 26; //left: 50%; z-index: 1500; border: 0px; border-top: 0px; border-style: solid; border-color: #000; margin-left: auto; margin-top: -1px; margin-right: auto; width: 100%; } div#menu ul ul { display: none; } div#menu ul li:hover ul {display: block;} div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} * html img, * html .welcome,#nav ul { behavior: url(ie-png-fix/iepngfix.htc); } ------------------------------------------------------------------------------ heres the html ------------------------------------------------------------------------------ <div id="menu"> <ul> <li class="first"><h2>Training</h2> <ul> <li> <a href="#" title="SEO Consultants Directory">CSS Hover Navigation</a> <a href="#" title="Lorem Ipsum Dolor">Helicopter Training</a> <a href="#" title="Loremza Ipsuma Dolora">Airplane Training</a> </li> </ul> </li> </ul> <ul><li><h2>Fanta</h2> <ul> <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Other Things That</a></li> </ul> </li> </ul> <ul> <li><h2>Maintenance</h2> <ul> <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">Other Link</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs7.asp" title="Complete Example">tanfa Demo example</a> <ul> <li><a href="#">tanfa Tutorial</a><!-- link to seo vertical tut --> <ul> <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs1.asp" title="Vertical Menu - Page 1">Stage 1</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs2.asp" title="Vertical Menu - Page 2">Stage 2</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs3.asp" title="Vertical Menu - Page 3">Stage 3</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs4.asp" title="Vertical Menu - Page 4">Stage 4</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs5.asp" title="Vertical Menu - Page 5">Stage 5</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/vs6.asp" title="Vertical Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <ul> <li><h2>About Us</h2> <ul> <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">Other Link</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs7.asp">tanfa Demo example</a><!-- fully working sample --> <ul> <li><a href="#">tanfa Tutorial</a><!-- link to horizontal tut --> <ul> <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs1.asp" title="Horizontal Menu - Page 1">Stage 1</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs2.asp" title="Horizontal Menu - Page 2">Stage 2</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs3.asp" title="Horizontal Menu - Page 3">Stage 3</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs4.asp" title="Horizontal Menu - Page 4">Stage 4</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs5.asp" title="Horizontal Menu - Page 5">Stage 5</a></li> <li><a href="http://www.tanfa.co.uk/css/examples/menu/hs6.asp" title="Horizontal Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
are you sure this is the one you want to implement? because there are a lot of drowdown nav freely available and much better than this one, also does it matter if it uses pure css or is it ok if it works with javascript?
Add to mSN if you have it. Else, could you set up a demo site/email me the files and PM it to me. I can make it pure CSS, and all browser compliant Cheers, BP
I have finished this. I'll upload it soon and PM you the link. I can upgrade the style of it if you need, and help integrate it with your site. BP