Popup menu display and immediately disappears - why?

[gregaryb]

I have these two javascript functions
 

				function DoToggleFictionPopupMenu()
				{
					var strPopupName = "FictionPopupMenu";
			
					if (document.getElementsByName(strPopupName) !== null)
					{
						if (bFictionPopupMenu)
						{
							document.getElementsByName(strPopupName)[0].style.display = "none";
						}
						else
						{
							document.getElementsByName(strPopupName)[0].style.display = "block";
						}
						bFictionPopupMenu = !bFictionPopupMenu;
					}
					else
					{
						alert("No such object with name '" + strPopupName + "'!");
					}
				}
								
				function DoToggleNonFictionPopupMenu()
				{
					var strPopupName = "NonFictionPopupMenu";
					
					if (document.getElementsByName(strPopupName)!== null)
					{
						if (bNonFictionPopupMenu)
						{
							document.getElementsByName(strPopupName)[0].style.display = "none";
						}
						else
						{
							document.getElementsByName(strPopupName)[0].style.display = "inline-block";
						}
						bNonFictionPopupMenu = !bNonFictionPopupMenu;
					}
					else
					{
						alert("No such object with name '" + strPopupName + "'!");
					}
				}

And this menu system
 

				<div id="sidebar">
					<ul>
						<li><a href="index.htm">Home</a></li>
						<li><a href="FAQ/default.html">FAQ</a></li>
						<li><a href="Emporium/default.html">Emporium</a></li>
						<li><a href="Requests/default.html">Requests</a></li>
						<li><a href="Facebook/default.html">Facebook</a></li>
						<li onclick="DoToggleFictionPopupMenu()"><a href="">Fiction</a></li>
							<div class="MenuPopup FictionPopup" id="MenuPopup" name="FictionPopupMenu">
								<ul>
									<li class="MenuPopupItem" ><a href="Fiction/Action&Adventure/default.html">Action</a></li>
									<li class="MenuPopupItem" ><a href="Fiction/Crime/default.html">Crime</a></li>
									<li class="MenuPopupItem" ><a href="Fiction/Drama/default.html">Drama</a></li>
									<li class="MenuPopupItem" ><a href="Fiction/Fantasy/default.html">Fantasy</a></li>
									<li class="MenuPopupItem" ><a href="Fiction/Historical/default.html">Historical</a></li>
									<li class="MenuPopupItem" ><a href="Fiction/Horror/default.html">Horror</a></li>
									<li class="MenuPopupItem" ><a href="Fiction/Romance/default.html">Political</a></li>
									<li class="MenuPopupItem" ><a href="Fiction/Romance/default.html">Romance</a></li>
									<li class="MenuPopupItem" ><a href="Fiction/ScienceFiction/default.html">Science</a></li>
								</ul>
							</div>
						<li onclick="DoToggleNonFictionPopupMenu()"><a href="">Non-Fiction</a></li>
							<div class="MenuPopup NonFictionPopup" id="MenuPopup" name="NonFictionPopupMenu">
								<ul>
									<li class="MenuPopupItem" ><a href="NonFiction/Biographies/default.html">Biographies</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Construction/default.html">Construction</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Crafts/default.html">Crafts</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Culture/default.html">Culture</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Engineering/default.html">Engineering</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Food/default.html">Food</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Geography/default.html">Geography</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Handyman/default.html">Handyman</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/History/default.html">History</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/IT/default.html">IT</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Maths/default.html">Maths</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Nature/default.html">Nature</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Politics/default.html">Politics</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Sports/default.html">Sports</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Travel/default.html">Travel</a></li>
									<li class="MenuPopupItem" ><a href="NonFiction/Science/default.html">Science</a></li>
								</ul>
							</div>
					</ul>
				</div>

It looks like this to begin with.

It is supposed to look like this when you click the 'Fiction' link:

Then if you click the 'Fiction' link again that popup menu should close.
However when you click it the popup menu appears for half a second and then closes.

I can;t figure out what is causing this.

master.dwt

[gregaryb]

And I have tried examining the 'display' property to see of it is equal to 'inline-block' or 'none' but comparing that property to those strings just does not work. So the boolean variables are a work around.

[Ingolme]

It's probably reloading the page because of the links. If you remove the <a href=""> tags it should work.