jasonc310771
11-27-2008, 01:25 PM
i haev tried to work this out but just keep getting messed up.
wanting to have the img1 to show first then img2 to show on hovering.
please help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
#nav, #nav ul { margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; }
#nav a:link, #nav a:active, #nav a:visited { display:block; padding:0px 5px; border:1px solid #A3D7A0; color:#11147d; text-decoration:none; background-color:#A3D7A0; }
.imgbut .m1 a:hover { background-image: url(images/img1.gif); }
.imgbut .m2 a:hover { background-image: url(images/img2.gif); }
#nav a:hover { background-image: url(images/img1.gif); }
#nav li { float:left; position:relative; }
#nav ul { position:absolute; width:12em; top:1.5em; display:none; }
#nav li ul a { width:12em; float:left; }
#nav ul ul { top:auto; }
#nav li ul ul { left:12em; margin:0px 0 0 10px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display:none; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display:block; }
-->
</style>
</head>
<body>
<ul id="nav">
<li class="imgbut m1"><a href="#"> </a></li>
<li class="imgbut m2"><a href="#"> g</a></li>
<li><a href="#"> </a>
<ul>
<li class="imgbut m1"><a href="#">3.1 TEST</a> </li>
<li class="imgbut m2"><a href="#">3.2 TEST</a></li>
<li class="imgbut m1"><a href="#">3.3 TEST</a></li>
</ul>
</li>
</ul>
</body>
</html>
wanting to have the img1 to show first then img2 to show on hovering.
please help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
#nav, #nav ul { margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; }
#nav a:link, #nav a:active, #nav a:visited { display:block; padding:0px 5px; border:1px solid #A3D7A0; color:#11147d; text-decoration:none; background-color:#A3D7A0; }
.imgbut .m1 a:hover { background-image: url(images/img1.gif); }
.imgbut .m2 a:hover { background-image: url(images/img2.gif); }
#nav a:hover { background-image: url(images/img1.gif); }
#nav li { float:left; position:relative; }
#nav ul { position:absolute; width:12em; top:1.5em; display:none; }
#nav li ul a { width:12em; float:left; }
#nav ul ul { top:auto; }
#nav li ul ul { left:12em; margin:0px 0 0 10px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display:none; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display:block; }
-->
</style>
</head>
<body>
<ul id="nav">
<li class="imgbut m1"><a href="#"> </a></li>
<li class="imgbut m2"><a href="#"> g</a></li>
<li><a href="#"> </a>
<ul>
<li class="imgbut m1"><a href="#">3.1 TEST</a> </li>
<li class="imgbut m2"><a href="#">3.2 TEST</a></li>
<li class="imgbut m1"><a href="#">3.3 TEST</a></li>
</ul>
</li>
</ul>
</body>
</html>