[HTML] pobierz, plaintext 
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  4. <head>
  5. 	<meta http-equiv="Content-type" content="application/xhtml+xml; charset=utf-8" />
  6. 	<script type="text/javascript" src="jsMenu.js"></script>
  7. 	<link rel="stylesheet" href="jsMenu.css " type="text/css" />
  8. </head>
  9. <body>
  10. 	<div id="menu-1" class="menu">
  11. 		<a href="#">Menu 1 :: Link 1</a>
  12. 		<a href="#">Menu 1 :: Link 2</a>
  13. 		<a href="#">Menu 1 :: Link 3</a>
  14. 		<a href="#">Menu 1 :: Link 4</a>
  15. 		<a href="#">Menu 1 :: Link 5</a>
  16. 	</div>
  17. 	<div id="menu-2" class="menu">
  18. 		<a href="java script:void(0)" id="topMenu-2-1">Menu 2 :: Pod Menu 2.1<span id="arrow">ť</span></a>
  19. 		<div id="menu-2-1" class="menu">
  20. 			<a href="#">Menu 2.1 :: Link 1</a>
  21. 			<a href="#">Menu 2.1 :: Link 2</a>
  22. 			<a href="#">Menu 2.2 :: Link 3</a>
  23. 		</div>
  24. 		<a href="java script:void(0)" id="topMenu-2-2">Menu 2 :: Pod Menu 2.2<span id="arrow">ť</span></a>
  25. 		<div id="menu-2-2" class="menu">
  26. 			<a href="#">Menu 2.2 :: Link 1</a>
  27. 			<a href="#">Menu 2.2 :: Link 2</a>
  28. 			<a href="#">Menu 2.2 :: Link 3</a>
  29. 		</div>
  30. 	</div>
  31. 	<div id="menu-3" class="menu">
  32. 		<a href="java script:void(0)" id="topMenu-3-1">Menu 3 :: Pod Menu 3.1<span id="arrow">ť</span></a>
  33. 		<div id="menu-3-1" class="menu">
  34. 			<a href="java script:void(0)" id="topMenu-3-1-1">Menu 3.1 :: Pod Menu 3.1.1<span id="arrow">ť</span></a>
  35. 			<div id="menu-3-1-1" class="menu">
  36. 				<a href="#">Menu 3.1.1 :: Link 1</a>
  37. 				<a href="#">Menu 3.1.1 :: Link 2</a>
  38. 				<a href="#">Menu 3.1.1 :: Link 3</a>
  39. 			</div>
  40. 			<a href="#">Menu 3.1 :: Link 1</a>
  41. 		</div>
  42. 		<a href="#">Menu 3 :: Link 1</a>
  43. 		<a href="#">Menu 3 :: Link 2</a>
  44. 		<a href="#">Menu 3 :: Link 3</a>
  45. 	</div>
  46. 	<br />
  47. 	<br />
  48. 	<div class="topMenu">
  49. 		<a href="java script:void(0)" id="topMenu-1">Menu 1</a> |
  50. 		<a href="java script:void(0)" id="topMenu-2">Menu 2</a> |
  51. 		<a href="java script:void(0)" id="topMenu-3">Menu 3</a>
  52. 	</div>
  53. </body>
  54. </html>
[HTML] pobierz, plaintext

Kod
    $ = function (id)
    {
        return document.getElementById(id);
    }
    window.onload = function ()
    {
        getMenu();
    }
    getMenu = function (subMenu)
    {
        if (!subMenu)
        {
            var subMenu = '';
        }
        subMenu += '-';
        var menuiD = 1, topMenu, menu;
        while (subMenu)
        {
            topMenu = $('topMenu' +subMenu +menuiD);
            menu = $('menu' +subMenu +menuiD);
            if (topMenu && menu)
            {
                getMenu(subMenu +menuiD);
                setMenu(topMenu, menu);
            }
            else
            {
                break;
            }
            menuiD++;
        }
    }
    setMenu = function (topMenu, menu)
    {
        var subMenu = /^menu-\d-/.test(menu.id);
        topMenuFuncrion = function () {setMenuPosition(topMenu, menu, subMenu); showMenu(menu, true)};
        subMenu ? topMenu.onmouseover = topMenuFuncrion : topMenu.onclick =  topMenuFuncrion;
        topMenu.onmouseout = function () {showMenu(menu, false)};
        menu.onmouseover   = function () {showMenu(menu, true)};
        menu.onmouseout    = function () {/*showMenu(menu, false)*/};
    }
    setMenuPosition = function (topMenu, menu, subMenu)
    {
        menu.style.top = topMenu.offsetTop + (subMenu ? 0 : topMenu.offsetHeight)  + 'px';
        menu.style.left = topMenu.offsetLeft + (subMenu ? topMenu.offsetWidth : 0) + 'px';
    }
    showMenu = function (menu, show)
    {
        menu.style.display = show ? 'block' : 'none';
    }

Kod
    body {margin: 5px; padding: 0; font-family: verdana, tahoma, arial, sans-serif; font-size: 12px;}
    .menu, .topMenu {font-size: 12px; color: #000000; background-color: #f9f9f9; border: #000000 1px solid; white-space: nowrap;}
    .menu a, .topMenu a {color: #000000; text-decoration: none}
    .menu a:hover, .topMenu a:hover {background-color: #afcbe7; text-decoration: none;}
    .menu {display: none; position: absolute}
    .menu a {display: block; padding-right: 20px;}
    .menu a #arrow {font-weight: bold; position: absolute; right: 5px}


Napisałem taki skrypt który wyswietla menu - a raczej powinien. Chodzi i zakomentowana czesc ze skryptu js dotyczaca akcji onmouseout. Po usunieciu komentarzy skrypt nie chce ustawic blokow w odpowiednim miejscu. Zreszta zobaczcie sami zakomentowaną werjse i i niezakomentowaną.
Co jest nie tak?