We help IT Professionals succeed at work.

Drop Down menu on table mouseover

I have this code:

<table id="Table_01" width="731" height="71" border="0" cellpadding="0" cellspacing="0">
		<td width="125" background="images/nav1.png" onmouseover="this.style.background='url(images/nav1_r.png)'" onmouseout="this.style.background='url(images/nav1.png)'" class="navText"><a href="index2.php">HOME</a></td>
		<td width="120" background="images/nav2.png"  onmouseover="this.style.background='url(images/nav2_r.png)'" onmouseout="this.style.background='url(images/nav2.png)'" class="navText"><a href="about-us.php">ABOUT US</a></td>
		<td width="120" background="images/nav3.png"  onmouseover="this.style.background='url(images/nav3_r.png)'" onmouseout="this.style.background='url(images/nav3.png)'" class="navText"><a href="solutions.php">OUR SOLUTIONS</a></td>
		<td width="119" background="images/nav4.png"  onmouseover="this.style.background='url(images/nav4_r.png)'" onmouseout="this.style.background='url(images/nav4.png)'" class="navText"><a href="benefits.php">BENEFITS</a></td>
		<td width="121" background="images/nav5.png"  onmouseover="this.style.background='url(images/nav5_r.png)'" onmouseout="this.style.background='url(images/nav5.png)'" class="navText"><a href="calculator.php">CALCULATOR</a></td>
		<td width="126" background="images/nav6.png"  onmouseover="this.style.background='url(images/nav6_r.png)'" onmouseout="this.style.background='url(images/nav6.png)'" class="navText"><a href="contact-us.php">CONTACT US</a></td>

Open in new window

I want to know how to get a drop down menu on one of these links
Watch Question

Here's a clean, simple a nice navigation menu by Nick La.

The Demo: http://www.webdesignerwall.com/demo/css3-dropdown-menu/

The Tutorial: http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/

Hope that helps :)

Here's the result: (first image)

The second image is for Pure CSS Dropdown

Link to the second version (Pure CSS Dropdown):

Hope that helps :)



I am looking for one that will have a bottom border thickness and colour for each menu item.

I would like to create a menu like this http://www.thomasvale.com but with drop down function
Nah, you don't want that, their side slider menu is in flash, and search engines index nothing in flash files, so the nav menu is never found, which means the site is never indexed properly.  Very BAD result !!

Back to your TDs, they look nicely styled, which one do you want a drop down on, and how is it to appear, when moused over, or what?


I want the menu on the "Benefits" menu.
I need three menu items to come down. On mouse over would be perfect.

Which menu on thomasvale.com do you want? Is it the horizontal one (Home, Expertise, etc) or the vertical one (Why?, Areas of Work, etc)?


I want the top one with the colourfull bottom border.

I have the images setup as boxes with a 3px line at the bottom. (i didnt use css) it looks good as I needed a gradient of green and blue running along the line.

The thomasvale menu does not have a drop down.

I would recommend you use a continuous gradient too rather than their CSS styling, as it would look more professional.  The code below is their LI menu code, you could adapt it.  All you need under each LI item is a separate DIV contained in the LI item with the sub list that you want to drop down.  Then on that div, just toggle the display --

onMouseOver=DIV1.style="display:block;"   --   to show the submenu

onMouseOut=DIV1.style="display:hidden;"   --   to make the submenu disappear

You don't need their nodes and classes, just this structure --

  <LI> <DIVX  put the onMouseOver and onMouse out code here> First menu item </DIV>
     <DIV id="DIV1>
           <LI> first sub</LI>
          <LI> second sub </LI>
    </LI>    -- close first menu item
    do rest of main items

Use that structure and it should work fine
                        <li id="node_id_178" class="firstli"><div><a href="/eng" ><span>Home</span></a></div></li>
                          <li id="node_id_179"><div><a href="/eng/Expertise"><span>Expertise</span></a></div></li>
                          <li id="node_id_673"><div><a href="/eng/Renewable-Technologies"><span>Renewable Technologies</span></a></div></li>

                          <li id="node_id_180"><div><a href="/eng/Overview"><span>Overview</span></a></div></li>
                          <li id="node_id_181"><div><a href="/eng/Why-Thomas-Vale"><span>Why Thomas Vale?</span></a></div></li>
                          <li id="node_id_182"><div><a href="/eng/CSR"><span>CSR</span></a></div></li>
                          <li id="node_id_183"><div><a href="/eng/Good-News"><span>Good News</span></a></div></li>
                          <li id="node_id_184"><div><a href="/eng/Careers"><span>Careers</span></a></div></li>
                          <li id="node_id_185" class="lastli"><div><a href="/eng/Contact-Us"><span>Contact Us</span></a></div></li>


Open in new window


I have this code:
<td width="125" background="images/nav1.png" onmouseover="this.style.background='url(images/nav1_r.png)'" onmouseout="this.style.background='url(images/nav1.png)'" class="navText"><a href="index2.php">HOME</a></td>

it already has a mouseover on it,
I cannot add this
onMouseOver=DIV1.style="display:block;"   --   to show the submenu

or can I?
I was just giving an example with a DIV.  If you are using tables, you won't be able to add a drop down menu under a table cell, unless you make a new table under it.  It would be easier to put a DIV under that table cell and use the display property to make it appear disappear.  But using DIVs with tables is not such a good idea, as you get lots of browser problems with it.

You could try putting another table styled with display:none; in your code above, between </a> and </td> and toggle that display.  I have never done it, but it might work.  So take my code and make a table instead of a DIV with an id attached to the table, so you can toggle and address it.


hi, your example does not work :-S
it will work when coded correctly.  Good luck


i've found this

<div class="menu">
<li><a href="index2.php">HOME<!--[if gte IE 7]><!--></a><!--<![endif]-->
<li><a href="about-us.php">ABOUT US<!--[if gte IE 7]><!--></a><!--<![endif]-->
<li><a href="solutions.php">SOLUTIONS<!--[if gte IE 7]><!--></a><!--<![endif]-->
<li><a href="benefits.php">BENEFITS<!--[if gte IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->
      <li><a href="finance.php">Finance / Grants</a></li>
      <li><a href="construction.php">Construction / Tradesmen</a></li>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<li><a href="faq.php">FAQ</a></li>
<li><a href="contact-us.php">CONTACT US<!--[if gte IE 7]><!--></a><!--<![endif]-->


but the submenu rollover needs to be different
.menu {width:731px; height:71px; position:relative; z-index:100;font-family:arial, sans-serif;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:731px; w\idth:730px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:120px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:120px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color:#000; width:120px; height:30px; background-image:url(images/nav1.1.png); height:71px; padding-left:10px; line-height:29px; font-weight:bold; text-align:center;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:120px; w\idth:128px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#c9ba65;}
.menu ul ul :hover > a.drop {background:#c9ba65;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden; position:absolute;height:0;top:31px;left:0; width:120px;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* position the third level flyout menu */
.menu ul ul ul{left:120px; top:-1px; width:120px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#e5e1d6; color:#000; height:auto; line-height:1em; padding:5px 10px; width:100px;border-width:0 1px 1px 1px; }
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:120px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000;  background:#e5e1d6;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#e5e1d6;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}

Open in new window