SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript menu problem with IE

    The code below works fine in Firefox. The way it works in IE is that when you hover over a main menu, the sub-menus pop out as expected. BUT when you move the mouse to a sub-menu, the sub-menus disappear.

    Maybe it's working IE it's programmed but working the way I want it to in Firefox.

    Either way, the way I want it to work is when mouse form main menu to sub-menu, the sub-menu stays out there until you mouse to another main menu, click on a sub-menu, click on another part of the page. This is the way I think most pop-out menus work.

    How do you fix this to work in IE also?
    HTML Code:
    <script type="text/javascript">
    function showMenu(elmnt)   {
      document.getElementById(elmnt).style.display="block"
    }
    function showNoMenu(elmnt)   {
      document.getElementById(elmnt).style.display="none"
    }
    </script>
    ...
    <ul>
    	<li><a href="/">Home</a></li>
    	<li><a href="#" onMouseOver="javascript:showMenu('subMenu');" onMouseOut="javascript:showNoMenu('subMenu');">Your Coverage</a>
    	<ul ID="submenu">
    		<li><a href="link1.php">link1</a></li>
    		<li><a href="link2.php">link2</a></li>
    		<li><a href="link3.php">link3</a></li>
    	</ul>
    	</li>
    </ul>
    Last edited by WebDevGuy; Feb 23, 2007 at 07:39.

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, you have set the event handlers to watch the mouseover and mouseout of the <a> tag. Unfortunately, the <a> tag does not include the submenu, so when you mouse over the submenu, hey presto it disappears.

    I would eliminate the <a> tag altogether and put the onmouseover and onmouseout handlers directly in the <li> tag, which DOES include the submenu and shouldn't have this problem.

    Code:
    <ul>
    	<li><a href="/">Home</a></li>
    	<li onmouseover="showMenu('subMenu');" onmouseout="showNoMenu('subMenu');">Your Coverage
    	<ul ID="submenu">
    		<li><a href="link1.php">link1</a></li>
    		<li><a href="link2.php">link2</a></li>
    		<li><a href="link3.php">link3</a></li>
    	</ul>
    	</li>
    </ul>

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2004
    Location
    USA
    Posts
    1,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    works terrific - thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •