I'm trying to create my first css navigation menu. I have created my layers for
the navigation. Now I wondering what is the best way to create the rollover
affected? Any suggestions? I know that you can use onMouseOver with images. Can
you use it with div tags? I also wondering if I should have approached this
task with lists instead of layers. Any opinions? Any tutorials that can help me?

<a target=_blank class=ftalternatingbarlinklarge
href="http://www.impulsenc.com/example/newNav.htm">example of what I have so
far</a>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1-transitional.dtd">
<html>
<head>
<title>My Nav Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

/* This starts my id selectors */
#navHome {
position:absolute;
left:6px;
top:14px;
width:127px;
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
z-index:1;
color:#FFFFFF;
background-color:#003399;
border-style:solid;
border:1px;
border-color:#000000;
visibility: visible;
}

#navAbout {
position:absolute;
left:136px;
top:14px;
width:127px;
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
z-index:1;
color:#FFFFFF;
background-color:#003399;
border-style:solid;
border:1px;
border-color:#000000;
}

#navTP {
position:absolute;
left:266px;
top:14px;
width:127px;
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
z-index:1;
color:#FFFFFF;
background-color:#003399;
layer-background-color:#003399;
border-style:solid;
border:1px;
border-color:#000000;
}

#navOEG {
position:absolute;
left:396px;
top:14px;
width:127px;
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
z-index:1;
color:#FFFFFF;
background-color:#003399;
layer-background-color:#003399;
border-style:solid;
border:1px;
border-color:#000000;
}

#navEMC {
position:absolute;
left:526px;
top:14px;
width:127px;
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
z-index:1;
color:#FFFFFF;
background-color:#003399;
layer-background-color:#003399;
border-style:solid;
border:1px;
border-color:#000000;
}

#navCS {
position:absolute;
left:656px;
top:14px;
width:127px;
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
z-index:1;
color:#FFFFFF;
background-color:#003399;
/*layer-background-color:#003399;*/
border-style:solid;
border:1px;
border-color:#000000;
}
/*rollovers for the nav starts here */
#navAbout_over {
position:absolute;
left:136px;
top:37px;
width:127px;
height:44px;
z-index:2;
background-color:#3366FF;
color:#FFFFFF;
border-style:solid;
border-width:1px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#navTP_over {
position:absolute;
left:266px;
top:37px;
width:127px;
height:70px;
z-index:3;
background-color:#3366FF;
color:#FFFFFF;
border-style:solid;
border-width:1px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#navOEG_over {
position:absolute;
left:396px;
top:37px;
width:127px;
height:42px;
z-index:4;
background-color:#3366FF;
color:#FFFFFF;
border-style:solid;
border-width:1px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#navEMC_over{
position:absolute;
left:526px;
top:37px;
width:128px;
height:37px;
z-index:6;
background-color:#3366FF;
color:#FFFFFF;
border-style:solid;
border-width:1px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#navCS_over {
position:absolute;
left:656px;
top:37px;
width:127px;
height:59px;
z-index:7;
background-color:#3366FF;
color:#FFFFFF;
border-style:solid;
border-width:1px;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
/* This ends my id selectors */

/* This starts my class selectors */
a.outside:link {
width:127px;
text-decoration:none;
color:#FFFFFF;
line-height:18px;
}
a.outside:hover {
width:127px;
height:20px;
display:block;
background-color:#555555;
color:#ffffff;
border-style:none;
border-collapse:collapse;
text-decoration:none;
float:center;
overflow:hidden;
}
a.outside:visited {
width:127px;
text-decoration:none;
color:#FFFFFF;
border:1px;
height:20px;
}

a.inside:link {
display:block;
width:127px;
height:20px;
border-bottom:1px solid #000000;
text-decoration:none;
color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center;
}
a.inside:hover {
display:block;
width:123px;
height:20px;
border-bottom:1px solid #000000;
text-decoration:none;
color:#000000;
background-color:#33CCFF;
}
a.inside:visited {
display:block;
width:127px;
height:20px;
border-bottom:1px solid #000000;
text-decoration:none;
color:#ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
text-align:center
}
/* This starts my class selectors */
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);

//-->
</script>
<script src='ActiveContent_f-source.js' type='text/javascript'></script>
</head>
<body>
<div id="navHome"><a class="outside" href="./index.htm">Home</a></div>
<div id="navAbout"><a class="outside" href="about.htm">About Us</a></div>
<div id="navTP"><a class="outside" href="tps.htm">Traction Power</a></div>
<div id="navOEG"><a class="outside" href="index.htm">Catenary</a></div>
<div id="navEMC"><a class="outside" href="emc.htm">EMC Traction</a></div>
<div id="navCS"><a class="outside" href="cs.htm">Customer Service</a></div>

<div id="navAbout_over">
<a class="inside" href="history.htm">History</a>
<a class="inside" href="capabilities.htm">Capabilities</a>
<a class="inside" href="projects.htm">Projects</a>
</div>

<div id="navTP_over">
<a class="inside" href="improcon.htm">IMProCon™</a>
<a class="inside" href="bass.htm">Battery Substation</a>
<a class="inside" href="swgr.htm">Switchgear</a>
<a class="inside" href="rectifier.htm">Rectifier</a>
<a class="inside" href="relay.htm">Relays</a>
<a class="inside" href="tpsbro.htm">TPS Brochures</a>
</div>

<div id="navOEG_over">
<a class="inside" href="products.htm">Products</a>
<a class="inside" href="catalog.htm">OCS Catalog</a>
<a class="inside" href="ocsbro.htm">OCS Brochures</a>
</div>

<div id="navEMC_over">
<a class="inside" href="about.htm">About EMC</a>
<a class="inside" href="cbreaker.htm">Circuit Breakers</a>
</div>

<div id="navCS_over">
<a class="inside" href="cs.htm">CS Advocate</a>
<a class="inside" href="salesrep.htm">Sales Representatives</a>
<a class="inside" href="training.htm">Training</a>
</div>

</body>
</html>