Menu Code Mouse over and off

L

liunx

Guest
I'm new to HTML and CSS and while I can figure out some coding this one is giving me a headache. I have it working, which is great, but there's one small option that I want that i can't seem to figure out how to work. I'm sure its just a small matter I'm over looking. This is what I would like for the menu to do:

-Mouse moved over the main heading causes the hidden links to appear below.
-Those links dissappear when the mouse is taken off of the heading (with the exception of moving it down the links themselves).

My coding thus far is as follows, just the set up for it, not the full menu links or the actual href urls :) :

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<STYLE TYPE="text/css">

#menu1 { display : none }
#menu2 { display : none }


a:link {color:dimgray; text-decoration:none}
a:hover {color:red; text-decoration:underline}

</STYLE>

</head>

<body bgcolor="#000000" text="FFFFFF">

<TABLE BORDER="0" ALIGN="left">

<TR>
<TD VALIGN="top" WIDTH="200">
<SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'">
<FONT SIZE="2"><b>Players' Manual</b></FONT></SPAN><BR>
<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'">

<a href=http://www.webdeveloper.com/forum/archive/index.php/""target="C">Levels</a><br>

<a href=http://www.webdeveloper.com/forum/archive/index.php/""target="C">Battles</a><br>

<a href=http://www.webdeveloper.com/forum/archive/index.php/""target="C">Just Cause</a><br>

</SPAN>
</TD>
</TR>

<TR>
<TD VALIGN="top" WIDTH="200">
<SPAN onMouseOver="document.all.menu2.style.display = 'block'" onMouseOut="document.all.menu2.style.display = 'block'">

<FONT SIZE="2"><b>GMs' Manual</b></FONT></SPAN><BR>
<SPAN ID="menu2" onClick="document.all.menu2.style.display = 'none'">

<p><a href=http://www.webdeveloper.com/forum/archive/index.php/""target="C"></a><p>
<p><a href=http://www.webdeveloper.com/forum/archive/index.php/""target="C"></a><p>
<p><a href=http://www.webdeveloper.com/forum/archive/index.php/""target="C"></a><p>


</SPAN>
</TR>

</TABLE>

</body>
</html>



Any help would be appreciative! Thank you,

Fading Image<div style="width:10em;" onmouseover="document.getElementById('menuX').style.display = 'block';" onmouseout="document.getElementById('menuX').style.display = 'none';">
<div style="font-size:1em; font-weight:bold;">Players' Manual</div>
<ul id="menuX">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="C">Levels</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="C">Battles</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="C">Just Cause</a></li>
</ul>
</div>The code you gave me works great Fang! Thank you! However this is one minor thing that I would like to change if possible.. though I'm not sure how. With the code above it causes the drop down links to be indented, and no longer directly under the main heading. I've tried taking the "ul" code out of the last command but that causes the drop down menu not to work at all. Is there anyway to fix this??

Thanks in advance!

Fading Image:D<div style="width:10em;" onmouseover="document.getElementById('menuX').style.display = 'block';" onmouseout="document.getElementById('menuX').style.display = 'none';">
<div style="font-size:1em; font-weight:bold;">Players' Manual</div>
<ul id="menuX" style="margin:0;padding:0;list-style:none;">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="C">Levels</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="C">Battles</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"" target="C">Just Cause</a></li>
</ul>
</div>Thank you!!!! It works perfectly! Thank you for all the help and time :D your a life saver.

Fading Image
 
You must log in or register to reply here.
Back
Top