Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Rhinorhino on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

drop down menu 3

Status
Not open for further replies.

Dre313

Technical User
Joined
Jun 4, 2003
Messages
219
Location
US
I have a menu which drops down... when the menu drops.. each item to select is spaced.. I was wondering is there a way I can fill those spaces in with a color..

I want to do this because.. now when i mouse over and it drops.. but if I have an image or some wording behind it.. Those blank lines that seperate the items in my drop down menu shows up in between those lines....

heres my code...

<html>
<head>
<style>
a.menuNav {
color:black;
text-decoration:none;
font:normal 5pt Verdana, Arial;
background:orange;
width:100%;
height:100%;
padding:2 2 2 2;/*use this here to give the space between links. (top,right,bottom,left)*/
}
a.menuNav:hover{
text-decoration:none;
background:#FFcc66;
color:black;
}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type=&quot;text/javascript&quot;>
function showmenu(elmnt)
{
document.all(elmnt).style.visibility=&quot;visible&quot;
}

function hidemenu(elmnt)
{
document.all(elmnt).style.visibility=&quot;hidden&quot;
}
</script>

</head>
<body>
<table cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot; width=&quot;750&quot;>
<tr>
<td onmouseover=&quot;showmenu('menu1')&quot; onmouseout=&quot;hidemenu('menu1')&quot; width=&quot;127&quot; >
<img border=&quot;0&quot; src=&quot;business_logo.bmp&quot; width=&quot;125&quot; height=&quot;19&quot;><br />
<table class=&quot;menu&quot; id=&quot;menu1&quot; width=&quot;125&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; >
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../html&quot;><font size=&quot;1&quot; color=&quot;#000000&quot;>Adipure</a></font></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xhtml&quot;><font size=&quot;1&quot; color=&quot;#000000&quot;>BSD</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../css&quot;><font size=&quot;1&quot; color=&quot;#000000&quot;>Building 5 NIL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xml&quot;><font size=&quot;1&quot; color=&quot;#000000&quot;>CAD</a></td></tr>
</table>
</td>
</tr>
</table>
</body>


Thanks
 
in your menu table, change
cellspacing=&quot;1&quot;

to
cellspacing=&quot;0&quot;

=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
 
I actually wanted something that would divide my menus apart.. by changing it to cellspacing &quot;0&quot; It just removed the blank line..

IS there any other way ??

thanks
 
Here are two functions from the book Beginning JavaScript, published by Wrox, authored by Paul Wilton.
Chapter 13, IE_NN_Menus.htm .. (the source code from the book can be downloaded from this is only part of the code they used which I thought addresses what you were looking for and is cross browser compliant.

var ns = (navigator.appName.indexOf('Netscape')>-1);
var ie = (navigator.appName.indexOf('Microsoft Internet Explorer')>-1);

function document_onmouseover(e)
{
if (ns)
{
var srcElement = e.target;
}
else
{
var srcElement = event.srcElement;
}

if (srcElement.nodeType == 3)
{
srcElement = srcElement.parentNode;
}

if (srcElement.tagName==&quot;TD&quot;)
{
srcElement.style.color = &quot;white&quot;;
srcElement.style.backgroundColor = &quot;darkblue&quot;
}
}

function document_onmouseout(e)
{
if (ns)
{
var srcElement = e.target;
}
else
{
var srcElement = event.srcElement;
}

if (srcElement.nodeType == 3)
{
srcElement = srcElement.parentNode;
}
if (srcElement.tagName == &quot;TD&quot;)
{
srcElement.style.color =&quot;darkblue&quot;;
srcElement.style.backgroundColor = &quot;darkorange&quot;;
}
}


<BODY onmouseover=&quot;document_onmouseover(event)&quot;
onmouseout=&quot;document_onmouseout(event)&quot;>

Hopefully this will give you some direction to accomplish what you are after.

Good Luck,
Brian
 
there's always another way...

leave the cellspacing at 1

add to your CSS style:

table.menu {
font-size:100%;
position:absolute;
visibility:hidden;
background:#ff0000;
}

change the background color to whatever you want

=========================================================
try { succeed(); } catch(E) { tryAgain(); }
-jeff
 
How About?
<table bgcolor=orange border=&quot;1&quot; bordercolor=white class=&quot;menu&quot; id=&quot;menu1&quot; width=&quot;125&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot; >
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../html&quot;><font size=&quot;1&quot; color=&quot;#000000&quot;>Adipure</a></font></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xhtml&quot;><font size=&quot;1&quot; color=&quot;#000000&quot;>BSD</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../css&quot;><font size=&quot;1&quot; color=&quot;#000000&quot;>Building 5 NIL</a></td></tr>
<tr><td ><a class=&quot;menuNav&quot; href=&quot;../xml&quot;><font size=&quot;1&quot; color=&quot;#000000&quot;>CAD</a></td></tr>
</table>
 
awesome... !!

Thanks to you all
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top