Hey everyone. I just registered here and I believe this will be an awesome website for me to help out and get support from. Anyways, on to my problem... I am currently designing a site for a client and there is only one drop down menu that is for the clients products listing. I have it so that onmouseover, javascript changes the css class of the table cell's to something darker and onmouseout, it changes back to the original color. I've got this working fine, but the products drop down is causing the class to "not work" when moused over it. If you mouse over Products, it will expand the drop down menu but not change the class. Then, if you go down to the drop down menu and hover on a link there, the Products tab does what it's supposed to. Weird...I haven't been able to figure this out for the life of me. Here's my code for the complete navigation table with the <div> for the drop down menu contents. EDIT: This problem only occurs when the menu is enabled by hovering over the actual Products link. My desired effect works perfect when just hovering over the table cell though. <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="100" align="center" valign="middle" class="<?php echo $home; ?>" onmouseover="show_text(6,'description'); className='navtableover'" onmouseout="resetit('description'); className='<?php echo $home; ?>'"><a href="index.php">Home</a></td> <td width="100" align="center" valign="middle" class="<?php echo $products; ?>" onmouseover="show_text(0,'description'); className='navtableover'" onmouseout="resetit('description'); className='<?php echo $products; ?>'"><a href="products.php" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'prodmenu')">Products</a> <div id="prodmenu" class="anylinkcss"><b><a href="sas.php" onmouseover="this.style.fontWeight='bold';" onmouseout="this.style.fontWeight='bold';">School Automation Suite</a></b><a href="job.php" style="font-weight: normal;">Job Application</a> <a href="ftapp.php" style="font-weight: normal;">Field Trip Application</a> <a href="course.php" style="font-weight: normal;">Course Approval</a> <a href="discmanage.php" style="font-weight: normal;">School Discipline Management</a> <a href="subteach.php" style="font-weight: normal;">Sub Teacher Notification</a></div> </td> <td width="100" align="center" valign="middle" class="<?php echo $services; ?>" onmouseover="show_text(1,'description'); className='navtableover'" onmouseout="resetit('description'); className='<?php echo $services; ?>'"><a href="services.php">Services</a></td> <td width="100" align="center" valign="middle" class="<?php echo $about; ?>" onmouseover="show_text(7,'description'); className='navtableover'" onmouseout="resetit('description'); className='<?php echo $about; ?>'"><a href="about.php">About Us</a></td> <td width="100" align="center" valign="middle" class="<?php echo $links; ?>" onmouseover="show_text(2,'description'); className='navtableover'" onmouseout="resetit('description'); className='<?php echo $links; ?>'"><a href="links.php">Links</a></td> <td width="100" align="center" valign="middle" class="<?php echo $test; ?>" onmouseover="show_text(3,'description'); className='navtableover'" onmouseout="resetit('description'); className='<?php echo $test; ?>'"><a href="test.php">Test Drive</a></td> <td width="100" align="center" valign="middle" class="<?php echo $faq; ?>" onmouseover="show_text(4,'description'); className='navtableover'" onmouseout="resetit('description'); className='<?php echo $faq; ?>'"><a href="faq.php">FAQ</a></td> <td width="100" align="center" valign="middle" class="<?php echo $contact; ?>" onmouseover="show_text(5,'description'); className='navtableoverright'" onmouseout="resetit('description'); className='<?php echo $contact; ?>'"><a href="contact.php">Contact Us</a></td> </tr> </table> Code (markup): Any thoughts?
Yeah, I have a thought - it's ringing around in my head right now... it goes something like: WHAT THE **** ARE YOU WASTING A TABLE AND JAVASCRIPT ON THIS FOR?!? I say, that's only HALF a joke son. You've got an assload of presentational markup, inlined styling, and javascript thrown at what appears to be a fairly simple menu. 90% of that code needs to get the axe. Even WIERDER is all that php nonsense outputting variables for the class names, when the CONTENT itself is fixed. (whiskey tango foxtrot is going on there?) From what I see, there's no real reason that markup should be more than this: <ul id="mainMenu"> <li class="home"><a href="index.php">Home</a></li> <li class="products"> <a href="products.php">Products</a> <ul> <li><a href="sas.php">School Automation Suite</a></li> <li><a href="job.php">Job Application</a></li> <li><a href="ftapp.php">Field Trip Application</a></li> <li><a href="course.php">Course Approval</a></li> <li><a href="discmanage.php">School Discipline Management</a></li> <li><a href="subteach.php">Sub Teacher Notification</a></li> </ul> </li> <li class="services"<a href="services.php">Services</a></li> <li class="about"><a href="about.php">About Us</a></li> <li class="links"><a href="links.php">Links</a></li> <li class="test"><a href="test.php">Test Drive</a></li> <li class="faq"><a href="faq.php">FAQ</a></li> <li class="contact"><a href="contact.php">Contact Us</a></li> </ul> Code (markup): Everything else you are doing should be done in the CSS, Javascript shouldn't even be on the table excepting a .htc file to make :hover work in IE6/earlier... Though I'd have to see what you are attempting to do live on a page as I'm fairly certain we don't have the whole picture.
Well... a) I'm using JavaScript to change the classes onmouseover and onmouseout. b) The PHP is just to output the classes as a simple way to make a tab "selected" or "highlighted" when on the current page. (IE: Products tab is "selected" when on the products page; services tab is "selected" when on the services page) c) Will the code you just showed me enable a user to not see the menu, then hover on the products link/tab and then the menu will appear? d) http://www.possiblesolutions.com/new is the site we're working on currently. The menu also only displays correctly when I'm in fullscreen at my workstation. If the window is resized, it moves when products is hovered over. I've tried setting position to reletive but then it expands the whole table for no reason at all. e) HELP!@!!?!?!?!!?!?!?#$%$!?!?