Hi,
When the user mouses over Link One, a sub-nav div opens. While that div is open, I want Link One's a:hover style to persist, even though the user isn't technically mousing over it. I've tried a few different ways to make this happen with limited success. Can anyone help? My code is below.
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font-family: Cambria, Georgia, "Times New Roman", serif;
}
#nav_main {
color: #b30000;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #23405c;
}
#nav_sub {
position: absolute;
top: 106px;
left: 187px;
border: 1px solid #23405c;
visibility: hidden;
background-color: #23405c;
color: white;
}
#nav_sub a:link, #nav_sub a:visited {
color: white;
}
#nav_sub a:hover {
background-color: #b30000;
color: white;
text-decoration: none;
}
ul {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
li {
margin-left: -15px;
}
a:link, a:visited {
color: #b30000;
}
a:hover {
background-color: #b30000;
color: white;
text-decoration: none;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'
v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="nav_main">
<ul>
<li><a href="link.html" onmouseover="MM_showHideLayers('nav_sub','','show')" onmouseout="MM_showHideLayers('nav_sub','','hide')">Link One</a></li>
<li><a href="link.html">Link Two</a></li>
<li><a href="link.html">Link Three</a></li>
<li><a href="link.html">Link Four</a></li>
</ul>
</div>
<div id="nav_sub" onmouseover="MM_showHideLayers('nav_sub','','show')" onmouseout="MM_showHideLayers('nav_sub','','hide')">
<ul>
<li><a href="link.html">Sub One</a></li>
<li><a href="link.html">Sub Two</a></li>
<li><a href="link.html">Sub Three</a></li>
<li><a href="link.html">Sub Four</a></li>
</ul>
</div>
</body>
</html>
When the user mouses over Link One, a sub-nav div opens. While that div is open, I want Link One's a:hover style to persist, even though the user isn't technically mousing over it. I've tried a few different ways to make this happen with limited success. Can anyone help? My code is below.
Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns="<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
font-family: Cambria, Georgia, "Times New Roman", serif;
}
#nav_main {
color: #b30000;
position: absolute;
top: 100px;
left: 100px;
border: 1px solid #23405c;
}
#nav_sub {
position: absolute;
top: 106px;
left: 187px;
border: 1px solid #23405c;
visibility: hidden;
background-color: #23405c;
color: white;
}
#nav_sub a:link, #nav_sub a:visited {
color: white;
}
#nav_sub a:hover {
background-color: #b30000;
color: white;
text-decoration: none;
}
ul {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
}
li {
margin-left: -15px;
}
a:link, a:visited {
color: #b30000;
}
a:hover {
background-color: #b30000;
color: white;
text-decoration: none;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible'
v=='hide')?'hidden':v; }obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="nav_main">
<ul>
<li><a href="link.html" onmouseover="MM_showHideLayers('nav_sub','','show')" onmouseout="MM_showHideLayers('nav_sub','','hide')">Link One</a></li>
<li><a href="link.html">Link Two</a></li>
<li><a href="link.html">Link Three</a></li>
<li><a href="link.html">Link Four</a></li>
</ul>
</div>
<div id="nav_sub" onmouseover="MM_showHideLayers('nav_sub','','show')" onmouseout="MM_showHideLayers('nav_sub','','hide')">
<ul>
<li><a href="link.html">Sub One</a></li>
<li><a href="link.html">Sub Two</a></li>
<li><a href="link.html">Sub Three</a></li>
<li><a href="link.html">Sub Four</a></li>
</ul>
</div>
</body>
</html>