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
  • 117 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by tubesnube
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.