Cross browser compatable drop down menu

1. First step is to include this javascript on your page.
<br />/* Function for the hover menu */<br />sfHover = function()<br />{<br />var sfEls = document.getElementById("tiles").getElementsByTagName("LI");<br /><br />for (var i=0; i < onmouseover="function()" onmouseout="function()" classname="this.className.replace(new" b="" if="" onload=""></sfels.length;><br />
2. Next, include this css
<br />/** Drop Down Menu (http://www.krowland.net/tutorials/boxer_tutorial.html) **/<br /><br />#wrapper {<br /> padding: 0;<br /> margin: 0;<br /> width: 100%;<br />}<br />#menu {<br /> font-size: 1.0em;<br />}<br />#tiles, #tiles ol {<br /> list-style: none;<br /> padding: 0;<br /> margin: 0;<br />}<br />#tiles li {<br /> float: left;<br />}<br />#tiles a {<br /> display: block;<br /> color: #333;<br /> text-decoration: none;<br />}<br />#menu li:hover, #menu li.sfhover {<br /> background-position: 0% -148px;<br />}<br />#menu li:hover a, #menu li.sfhover a {<br /> background-position: 100% -148px;<br /> color: #c4683d;<br />}<br />#tiles li ol {<br /> position: absolute;<br /> margin-top: -12px;<br /> left: -999em;<br /> width: 160px;<br /> w\idth: 160px;<br /> color: #c4683d;<br />}<br />#tiles li.daddy {<br /> background: url("../images/rightarrow.gif") 90% 50% no-repeat;<br />}<br />#tiles ol.left li.daddy {<br /> background: url("../images/leftarrow.gif") 5% 50% no-repeat;<br /> padding-left: 2em;<br />}<br />#tiles li ol li {<br /> width: 160px;<br /> w\idth: 160px;<br /> color: #c4683d;<br /> padding: 3px 5px;<br /> font-size: 10px;<br /> background: url(/images/sb_dropdown_02.gif) no-repeat 0 0;<br />}<br />#tiles li ol.left li {<br /> width: 160px;<br /> w\idth: 160px;<br /> padding-left: 2em;<br />}<br />#tiles li ol li a {<br /> background: transparent;<br /> color: #c4683d;<br />}<br />#tiles li ol ol {<br /> margin: -2em 0 0 17.5em;<br /> mar\gin: -2.1em 0 0 16.7em;<br /> border: 1px solid #999;<br />}<br />#tiles li ol.left ol {<br /> margin-left: -16.5em;<br /> mar\gin-left: -17.8em;<br /><br />}<br />#tiles li:hover ol ol, #tiles li:hover ol ol ol, #tiles li.sfhover ol ol, <br />#tiles li.sfhover ol ol ol {<br /> left: -999em;<br />}<br />#tiles li:hover ol, #tiles li li:hover ol, #tiles li li li:hover ol, <br />#tiles li.sfhover ol, #tiles li li.sfhover ol, #tiles li li li.sfhover ol {<br /> left: auto;<br />}<br />#tiles li:hover ol a, #tiles li li:hover ol a, #tiles li li li:hover ol a, <br />#tiles li.sfhover ol a, #tiles li li.sfhover ol a,<br />#tiles li li li.sfhover ol a {<br /> color: #c4683d; <br /> <br />}<br />#tiles li:hover ol.left, #tiles li.sfhover ol.left {<br /> margin-left: -7.7em;<br /> mar\gin-left: -11.2em;<br />}<br />#menu #tiles li ol li:hover, #menu #tiles li ol li.sfhover {<br /> background: url(/images/sb_dropdown_02_hover.gif) no-repeat 0 0;<br /> width: 160px;<br />}<br />#menu #tiles li ol li:hover a, #menu #tiles li ol li.sfhover a {<br /> color: #c4683d;; <br />}<br />#menu #tiles li ol li:hover ol li, #menu #tiles li ol li.sfhover ol li {<br /> background: #F1F1F1; <br />}<br />#menu #tiles li ol li:hover ol li a , #menu #tiles li ol li.sfhover ol li a {<br /> color: #c4683d;<br />}<br />#menu #tiles li ol li ol li:hover, #menu #tiles li ol li ol li.sfhover {<br /> background: #f1ebdd;<br /> <br />}<br />#menu #tiles li ol li ol li:hover a , #menu #tiles li ol li ol li.sfhover a {<br /> color: #c4683d;<br />}<br />#menu #tiles li ol li.daddy:hover {<br /> /*background: #f1ebdd url("../images/rightarrow_over.gif") 90% 50% no-repeat;*/<br />}<br />#menu #tiles li ol.left li.daddy:hover {<br /> /*background: #f1ebdd url("../images/leftarrow_over.gif") 5% 50% no-repeat;*/<br />}<br />/********************/<br />
3. Last, here's the html code to make it all happen
<br /><div id="menu"><br /> <ol id="tiles"><br /> <li><a href="#">Title 1</a><br /> <ol><br /> <li style="font-size: 4px; background: url(/images/sb_dropdown_01.gif) no-repeat bottom left;"></li><br /> <li><a href="/"><img src="/images/leaf_bullet1.gif" border="0" />Face</a></li><br /> <li><a href="/"><img src="/images/leaf_bullet1.gif" border="0" />Lips</a></li><br /> <li><a href="/"><img src="/images/leaf_bullet1.gif" border="0" />Eyes</a></li><br /> <li><a href="/"><img src="/images/leaf_bullet1.gif" border="0" />Body</a></li><br /> <li style="background: url(/images/sb_dropdown_03.gif) no-repeat top left;"></li><br /> </ol><br /> </li><br /> </ol><br /></div><br />