PDA

View Full Version : Navigation Menu



Juniper79
11-20-2008, 02:03 AM
I'm trying to code a page that has a navigation menu. The end design should have 5 selections with 3 websites below it. The first menu labelled Football works great. I then tried to do another one labelled Baseball, however it's not working the same. So before I try to do another three, I figured I would stop and find some help as to why the second one isn't working. Any ideas? I have pasted my code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sporting News</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="sportsnews.css" type="text/css" />
<style type="text/css">
/*<![CDATA[*/
table.hideMenu {visibility:hidden; position:relative;
border-style: solid; border-width:
thin; border-color: #C10000 }
/*]]>*/
</style>
</head>
<body>
<script type="text/javascript">
/* <![CDATA[ */
function underlineOn(curLink) {
var selectedLink = document.getElementById(curLink);
selectedLink.style.textDecoration="underline";
}
function underlineOff(curLink) {
var selectedLink = document.getElementById(curLink);
selectedLink.style.textDecoration="none";
}
/* ]]> */
</script>
<table border="0" width="100%">
<colgroup span="1" width="25%"></colgroup>
<colgroup span=" 1" width="75%"></colgroup>
<tr>
<td><script type="text/javascript">
/* <![CDATA[ */
document.open();
document.write("<h1>" + document.title + "<\/h1>");
document.close();
/* ]]> */
</script>
<h2>Want sports news? We have the latest!</h2>
</td>
</tr>
</table>
<hr />
<table border="0" width="100%">
<colgroup span="1" width="25%" valign="top"></colgroup>
<colgroup span="1" width="75%" valign="top"></colgroup>
<tr>
<td valign="top">
<table width="90%">
<tr align="left">
<td onmouseover="document.getElementById('navigation').style.visibility='visible';"

onmouseout="document.getElementById('navigation').style.visibility='hidden';"><a href="">Football</a><br />
<table class="hideMenu" id="navigation" width="100%">
<tr>
<td><a href="http://www.nfl.com" id="nfl" onmouseover="underlineOn('nfl');" onmouseout="underlineOff('nfl');" name="nfl">NFL.com</a></td>
</tr>
<tr>
<td><a href="http://nbcsports.msnbc.com/id/3032875" id="nbc" onmouseover="underlineOn('nbc');" onmouseout="underlineOff('nbc');"

name="nbc">NBCSports.com</a></td>
</tr>
<tr>
<td><a href="http://sports.espn.go.com/nfl/index" id="espn" onmouseover="underlineOn('espn');" onmouseout="underlineOff('espn');"

name="espn">ESPN.com</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<table width="90%">
<tr align="left">
<td onmouseover="document.getElementById('navigation').style.visibility='visible';"

onmouseout="document.getElementById('navigation').style.visibility='hidden';"><a href="">Baseball</a><br />
<table class="hideMenu" id="navigation" width="100%">
<tr>
<td><a href="http://mlb.mlb.com/index.jsp" id="mlb" onmouseover="underlineOn('mlb');" onmouseout="underlineOff('mlb');"

name="mlb">MLB.com</a></td>
</tr>
<tr>
<td><a href="http://sports.espn.go.com/mlb/index" id="espn" onmouseover="underlineOn('espn');" onmouseout="underlineOff('espn');"

name="espn">ESPN.com</a></td>
</tr>
<tr>
<td><a href="http://www.sportingnews.com/baseball/" id="sporting" onmouseover="underlineOn('sporting');"

onmouseout="underlineOff('sporting');" name="sporting">SportingNews.com</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>