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 />

Sign up for free MP3 hosting at mp3crib.com

First Blog

Never bored games (ie Never board games) has started development of its site. View progress at www.neverboredgames.com. Be sure to visit our affiliate daily-sudoku.org to play in daily sudoku tournaments.