Javascript drop down menus

Zer0Cam · August 27, 2007

Ok, Guys this has stumped me I have a website I built for a teacher using drop down menus, I recently replaced the javascript so that it now works with Mozzila and IE 7.0 but it does not work with IE 6.0 is there a javascript that makes it work with all browsers? it's starting to get annoying heres the code I used.

<script language="javascript">
<!--
sfHover = function() {
var sfEls = document.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>

Website HTML

<?xml version="1.0" encoding="iso-8859-1"?><!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=iso-8859-1" />
<title>Dr. Conway's Home Page</title>
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}

#side, #side ul {
padding: 0;
margin: 0;
list-style: none;
}

#side a {
display: block;
width: 10em;
}

#side li {
float: left;
width: 10em;
}

#side li ul {
position: absolute;
width: 10em;
left: -999em;
background: #ff0;
}

#side li ul a:hover {
background: #00F;
}

#side li:hover ul {
left: 6%;
}







#topbar, #topbar ul {
padding: 0;
margin: 0;
list-style: none;
}

#topbar a {
display: block;
width: 10em;
}

#topbar li {
float: left;
width: 10em;
}

#topbar li ul {
position: absolute;
width: 10em;
left: -999em;
background: #000000;
}

#topbar li ul a:hover {
background: #ffffff;
}

#topbar table li:hover ul {
left: auto;
}

-->
</style>

<script language="javascript">
<!--
sfHover = function() {
var sfEls = document.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>
</head>

<body bgcolor="black" text="#FFFFFF" link="#0000FF" vlink="#FFFF00" alink="#0000FF">
<table width="100%" height="370" cellpadding="6" cellspacing="6" id="topbar">
  <tr>

		<td bgcolor="blue" colspan="2">
			<h1>
        <p align="center">The Conway Home Page</p>
      </h1>

      <table width="100%" bordercolor="#000000" id="topbar">
        <tr>
						<td align="left">
							<ul>


              <li><a href="Apushindexmain.html"><font color="#FFFFFF">APUSH</a> 
                <ul>
                  <li><a href="Apushindexmain.html">Main Page</a></li>
                  <li><a href="Apushannouncements.html">Current Announcements</a></li>
                  <li><a href="Apushintroduction.html">Intro. & Orientation</a></li>
                  <li><a href="Conceptcardintroapush.html">Concept Cards</a></li>

                  <li><a href="Apushlinks.html">Links</a></li>
                  <li><a href="Apushsyllabusbasic.html">Course Syllabus</a></li>
                  <li><a href="Previousresultsdata.html">Previous Years Results</a></li>
                </ul>
								</li>
							</ul>
						</td>

						<td align="left">
							<ul>
								<li><a href="Globalindexmain.html"><font color="#FFFFFF">Global Studies</a> 

                <ul>
                  <li><a href="Globalindexmain.html">Main Page</a></li>
                  <li><a href="Globalannouncements.html">Current Announcements</a></li>
                  <li><a href="Globalintro&orientation.html">Intro. & Orientation</a></li>

                  <li><a href="Globalcoursepolicies.html">Course Policies</a></li>
                  <li><a href="Regional&thematiclinksmain.html">Regional & Thematic 
                    Links</a></li>
                </ul>
								</li>
							</ul>
						</td>
						<td align="left">

							<ul>

              <li><a href="Americanindexmain.html"><font color="#FFFFFF">American Studies</a> 
                <ul>
                  <li><a href="Americanindexmain.html">Main Page</a></li>
                  <li><a href="Americanannouncements.html">Current Announcements</a></li>
                  <li><a href="Americanintro&orientation.html">Intro. & Orientation</a></li>
                  <li><a href="Americancoursepolicies.html">Course Policies</a></li>

                  <li><a href="Americancontentlinks.html">Content Links</a></li>
                </ul>
								</li>
							</ul>
						</td>
						<td align="left">
							<ul>
								<li><a href="Methodsindexmain.html"><font color="#FFFFFF">Teaching Methods</a> 

                <ul>

                  <li><a href="Methodsindexmain.html">Main Page</a></li>
                  <li><a href="Instructionalstrategies.html">Instructional Strategies</a></li>
                  <li><a href="Projectbasedlearningmain.html">Project Based Learning</a></li>
                  <li><a href="Methodscourseindexmain.html">Methods Course</a></li>
                  <li><a href="Methodscoursesyllabusintro.html">Intro. & Orientation</a></li>
                  <li><a href="Methodscoursepolicies.html">Course Policies</a></li>

                  <li><a href="Methodslinks.html">Links</a></li>
                </ul>
								</li>
							</ul>
						</td>
						<td align="left">
							<ul>
								<li><a href="Webresourcesindexmain.html"><font color="#FFFFFF">Web Resources</a>  

                <ul>

                  <li><a href="Webresourcesindexmain.html">Main Page</a></li>
                  <li><a href="Webteacherresources.html">Teacher Resources</a></li>
                  <li><a href="Websocialstudiesresources.html">Social Studies 
                    Resources</a></li>
                  <li><a href="Webmediaresources.html">Media Resources</a></li>
                  <li><a href="Websearchengines.html">Search Engines</a></li>
                  <li><a href="Webtextbookresources.html">Textbook Links</a></li>

                </ul>
								</li>
							</ul>
						</td>
						<td align="left">
							<ul>
								<li><a href="Chslinksindexmain.html"><font color="#FFFFFF">CHS links</a> 

                <ul>
                  <li><a href="Chslinksindexmain.html">Main Page</a></li>

                </ul>
								</li>
							</ul>
						</td>
					</tr>
				</table>
			</td>
		</tr>
<tr>

   <td width="19%" height="209" align="left" valign="top" bgcolor="red"> 
      <ul id="side">
        <li> 

          <p> </p>
        </li>
        


	<li>
     <p><a href="index.html">Home</a></p>


	</li>
        <li> 		     
        </li>

        <li> 
          <p><a href="#">Parents</a></p>
          <ul>
            <li><a href="Apushindexmain.html">APUSH</a></li>
            <li><a href="Globalindexmain.html">Global Studies</a></li>
            <li><a href="Americanindexmain.html">American Studies</a></li>
          </ul>

        </li>
        <li> 
          <p><a href="#">Teachers</a></p>
          <ul>
            <li><a href="Methodsindexmain.html">Teaching Methods</a></li>
            <li><a href="Webresourcesindexmain.html">Web Resources</a></li>
            <li><a href="Chslinksindexmain.html">CHS Links</a></li>

          </ul>
        <li> 
          <p><a href="#">Students</a></p>
          <ul>
            <li><a href="Apushindexmain.html">APUSH</a></li>
            <li><a href="Globalindexmain.html">Global Studies</a></li>
            <li><a href="Americanindexmain.html">American Studies</a></li>

            <li><a href="Webresourcesindexmain.html">Web Resources</a></li>
            <li><a href="Chslinksindexmain.html">CHS Links</a></li>
          </ul>
      </ul>
</li>
</ul>
</td>
    <td width="81%" nowrap="nowrap"> 
      <p><font size="+4"><strong>Welcome to Dr. Conway's Home Page</strong></font></p>

      <p> </p>
      <p> </p>
      <p> </p>
      <p><strong><font size="+3"><br />
        Navigation for this site functions best with <br />
        Firefox or Safari (see menus provided above). <br />
        <br />
        In addition to the navigation menus, here are <br />

        links to a few of the most frequently visited pages...</font><font size="+2"><br />
        </font></strong></p>
      <p><strong><font size="+2"><a href="Apushindexmain.html">APUSH Main Class 
        Page</a></font></strong></p>
      <p><strong><font size="+2"><a href="Instructionalstrategies.html">Instructional 
        Strategies (for teachers) Page</a></font></strong></p>
      <p><strong><font size="+2"><a href="Americancontentlinks.html">Conway's 
        U.S. History Links </a>: listed in chronological order</font></strong></p>
      <p><strong><font size="+2"><a href="Instructionalsonglist.html">Songs & 
        Lyrics related to U.S. History: </a><b><strong><font size="+3"> <font size="+1">Conway's 
        annotated, chronological listings</font></font></strong></b></font></strong></p>

      <p><font size="+2"><strong>Dorky top 10 Lists</strong>: <a href="Dorkytoptenlists.html"><font size="+1"><strong>Conway's 
        Dorky Lists...</strong></font></a><strong><font size="+1"><a href="Dorkytoptenlistsb.html">Students, 
        Friends, & Family Dorky Lists</a></font></strong></font></p>
      <p><font size="+2"><strong><strong><a href="Resume.html">Resume</a></strong></strong></font></p>
      <p></FONT></A></P>
      <!-- InstanceEndEditable --></td>
  </tr>

  <!-- InstanceEndRepeatEntry --><!-- InstanceEndRepeat -->
</table>
<table width="97%" border="0">
  <tr>
    <td><!-- InstanceBeginEditable name="Footnote" --> <P ali 
      <P align="center"><B>This web site contains information for Dr. Grant Conway's 
        classes at<br />
        <BR>
        </B><A HREF="http://www.chs.lane.edu/"><B>Winston Churchill High School</B></A><B> 
        and the </B><A HREF="http://www.uoregon.edu/"><B>University of Oregon</B></A><B>. 
        </B></P><P ali
      <P align="center"><a href="http://www.chs.lane.edu/"><b><img src="images/CHSimage%20again.jpg" width="158" height="61" /></b></a></P>

      <P align="center"><BR>
        <B><I>(last update = 6/ 28/ 2007)<BR>
        </I></B></P>
      <P ali
      <P align="center"><A HREF="mailto:[email protected]"><IMG SRC="images/mailslot.gif" WIDTH=36 HEIGHT=20 BORDER=0 ALIGN=bottom hspace=10></A><B> 
        Comments and questions can be sent to: <B>[email protected]</B></FONT></P>
      <!-- InstanceEndEditable --></td>
  </tr>
</table>

</body>
<!-- InstanceEnd --></html>

Zer0Cam · August 28, 2007

?

RichardRotterdam · August 28, 2007

i see your using lists so this one might work not sure since i don't have ie7

http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm

Zer0Cam · August 31, 2007

No it works in IE 7 and mozzila firerfox fine , But It doesn't work in IE 6 is there anyway to make it work in all of them ?

Zer0Cam · September 4, 2007

?????

Sign In

Javascript drop down menus

Recommended Posts

Zer0Cam

Link to comment

Share on other sites

Zer0Cam

Link to comment

Share on other sites

RichardRotterdam

Link to comment

Share on other sites

Zer0Cam

Link to comment

Share on other sites

Zer0Cam

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information