Member Avatar for tubesnube

Hi guys. Was wondering if anyone could shed some light on a problem I have here. What I want to do is just have to drop down menu's that work on a mouse over. I have the first one working 99% correctly but I tried adding a second drop down menu beside it and now both don't work.

The only problem I could see when the first one was working that if I refreshed the page the drop down menu was already appearing without the mouse over, but once I put the mouse over the menu it dissapeared and worked correctly from there on. Any reasons why this could be? When I add the second part of the code to the page the second button appears halfway down the page and in the centre of the page, and neither of the drop down menu's work correctly.

So I would really appreciate it if anyone could help me with this as I'm relatively new to HTML, CSS and PHP. Or if my way of implementing the drop down menu isn't as efficient as another way. Thanks alot guys.

<div id = "toolContent">
  <tr>
		<td>
		<!-- Displays the forms on mouseOver function -->
		<span onmouseover="document.all.D.style.display = 'block'" 
			onmouseout="document.all.D.style.display = 'none'">

			<b><font color = black >Book Review</font></b><br />

			<span id="D" onClick="document.all.D.style.display = 'none'">

			 <a href="tc_oss_rc.php"	>Choice 1</a><br />
			 <a href="tc_pm.php"		>Choice 2</a><br />
			 <a href="tc_pf.php" 		>Choice 3</a><br />
			 <a href="tc_cnoss.php" 	>Choice 4</a><br />
			 <a href="tc_wran.php" 		>Choice 5</a><br />
	 
			 </span>
		</span>
	 </td>
	</tr>
</div>

<!-- This is the menu that appear's halfway down the centre of the screen -->
<div id = "searchButtonLayout">
	<tr>
		<th>
			<span onmouseover = "document.all.D.style.display = 'block'"
			onmouseout = "document.all.D.display = 'none'">
			
				<b><font style = 'Ericsson Capital TT Regular'>Search</font></b><br />
				
				<span id = "D" onClick = "document.D.style.display = 'none'">
				
				<a href = "searchByReviewForum.php"		>By Review Forum</a><br />
				<a href = "searchByReviewNumber.php"	>By Review Number</a><br />
				<a href = "searchByDocumentNumber.php"	>By Document Number</a><br />
				
				</span>
			</span>
		</th>
	</tr>
</div>

If there's any more of my code needed let me no and I'll post it. Thanks again

Edited by tubesnube because: n/a
  • 2 Contributors
  • 4 Replies
  • 131 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by tubesnube

Dani AI

Generated

A few practical points that help avoid the exact problems you ran into. The root causes are usually: duplicate IDs (both menus referencing the same id), reliance on document.all (nonstandard and fragile), small typos in inline handlers (e.g. using .display instead of .style.display), and invalid HTML (table row/cell tags inside divs) that makes layout unpredictable. was right to recommend list-based menus styled with CSS — that pattern is simpler, more reliable, and degrades gracefully.

Quick checklist to fix and debug

  • Give each submenu its own identifier or, better, use classes/data-attributes and scope queries inside the menu container.
  • Replace document.all with modern APIs (document.getElementById, querySelector/querySelectorAll). document.all is non-standard — see Document.all - MDN.
  • Fix handler typos (use .style.display = 'none'), and watch the devtools console for JS errors (errors will stop subsequent scripts).
  • Avoid mixing tr/td directly inside divs; use semantic nav/ul/li or simple block elements and control placement with position: relative on the parent and position: absolute on the submenu.
  • Prefer CSS hover/focus for pure hover behavior and add keyboard support (focus) for accessibility — see CSS :hover - MDN.

Minimal robust pattern (concept)

<nav class="menu">
  <div class="menu-item">
    <button>Book Review</button>
    <div class="submenu" aria-hidden="true">...links...</div>
  </div>
  <div class="menu-item">
    <button>Search</button>
    <div class="submenu" aria-hidden="true">...links...</div>
  </div>
</nav>

Use CSS to hide/show (.submenu { display:none } .menu-item.open > .submenu { display:block }) and toggle the open class with event listeners on the .menu-item (mouseenter/leave and focus/blur for keyboard users). That removes id collisions, keeps layout stable, and is much easier to maintain than inline event attributes.

Recommended Answers

All 4 Replies

Member Avatar for marios_neo

post your function to see if i can help you.

Member Avatar for tubesnube

post your function to see if i can help you.

What I have posted above is all the code I have for the drop down menu. It works apart from the problems I mentioned in my first post..

Member Avatar for marios_neo

the better thing that i suggest is to do lists and style it with CSS.

<style type="text/css">
body {
    font: 11px verdana;
}
ul {
    border-bottom: 1px solid #CCCCCC;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 150px;
}
ul li {
    position: relative;
}
li ul {
    display: none;
    left: 149px;
    position: absolute;
    top: 0;
}
ul li a {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #CCCCCC #CCCCCC -moz-use-text-color;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    color: #777777;
    display: block;
    padding: 5px;
    text-decoration: none;
}
* html ul li {
    float: left;
    height: 1%;
}
* html ul li a {
    height: 1%;
}
li:hover ul, li.over ul {
    display: block;
}

</style>
<title>Untitled Document</title>
</head>

<body>
   <ul id="nav">
<li>
<a href="#">DEMO</a>
<ul>
<li>
<a href="#">DEMO</a>
</li>
<li>
<a href="#">DEMO</a>
</li>
<li>
<a href="#">DEMO</a>
</li>
<li>
<a href="#">DEMO</a>
</li>
<li>
<a href="#">DEMO</a>
</li>
</ul>
</li>
</ul>

try this out

Member Avatar for tubesnube

Thanks, I actually got it working properly a little while ago.

Thanks for the help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.