dhtmlxMenu not visible properly

Hi All,

I have added the dhtmlxMenu in the code as below. The issue is the menu gets generated but it is not shown properly. It hides behind some other object and is not seen at all.

Global PAYplus SP   powered by  
				<span class="main_span" style="border:0px" id="welcome">Welcome, <b><%=userName %></b></span><span class="main_span" ><select id="office_selector" onchange="globalOfficeChange(this)" style="font-size:0.8em;"><option value="GB1" selected="true">GB1</option><option value="IND">IND</option><option value="AUS">AUS</option></select></span>
				<span class="main_span" ><a href="javascript:void(0)" onclick="MyProfile()">My Profile</a></span><span class="main_span" ><a href="javascript:void(0)" onclick="bShowAlert=false;logout();">Logout</a></span>
				<span class="main_span" ><a href="javascript:void(0)" onclick="Help()">Help</a></span>
				<!--  					
				<div id="alertspan" style="visibility:hidden;display=none;top=4;left=374" class="main_span" ><img id="alertImg" src="../images/alerts/alertimg.png"/></div>
				<span class="main_span" style="border:0px;height:4px;top=4;left=374;">
			 		<select id="alertsCombo" style="font-size:0.8em;"></select>
			 	</span>
			 	-->		
				<script>if (false){var z = dhtmlXComboFromSelect("office_selector");}</script>
			</td>
			<td><div id="alertMenu" style="font-size:0.8em;width:25px">here</div></td>
		 </tr>
		  <!-- Added for Quick Search-->
		 <tr>	
		 	<td>
		 		
		 	</td>
			 <td style="text-align:right;vertical-align:center;">
							 
			 <span class="main_span" style="border:1px;" id="quickSearch">
					<select id="quick_search_selector" style="font-size:0.8em;"><option value="P_MID" selected="true">MID</option><option value="P_INST_ID">INST_ID</option></select></span>
			</span>						 
			 <input type="text" id="quickSearchText" border="1" style="height:17px;width:117px;font-size:0.8em;">
			 <span class="main_span" style="border:0px;height:10px" id="quickSearch">		 
					 <input type="image" src="../images/menu/MagnifyingGlass.png" id="quickSearchButton" onclick="insertAlertsButton();performQuickSearch();" style="font-size:0.8em;">
			</span>	 
			 </td>
		 </tr>
		  
		 </table>
		 <script>
			var menu = new dhtmlXMenuObject("alertMenu");
			menu.setIconsPath("../common/imgs/");
			// initing
			menu.addNewSibling(null, "file", "File", false);
			menu.addNewChild("file", 0, "new", "New", false, "new.gif");
			menu.addNewSeparator("new");
			menu.addNewChild("file", 2, "open", "Open", false, "open.gif");
		</script>

Table where menu initialized is hidden:

Thanks Alexandra but even if display:none is removed its still the same.

Please attach the completed demo that allows to reproduce the problem locally - docs.dhtmlx.com/doku.php?id=othe … leted_demo

Wow, thank you for this tutorial, Alexandra, really needed it!!!