Tak wyglada skrypt jednego pola:
<style type="text/css"> #menu {width: 150px; border: 1px solid #D3D3D3; height: 30px; overflow: hidden; text-align: center;} #menu:hover {background-color: #F0F0F0} ul {margin: 0px; padding: 0px;} li {list-style-type: none; width: 150px;} li a {text-decoration: none; display: block; width: 150px; padding: 5px; color: #3B3B3B; background-color: white;} li a:hover {text-decoration: none; color: #3B3B3B; width: 150px; padding: 5px; background-color: #F0F0F0 } #pole {border: solid 1px; height: 0px; overflow: hidden; position: absolute; background-color: white;} </style> <script type="text/javascript"> function mouseOver() { var pole = document.getElementById("pole"); pole.style.height = "120"; } function mouseOut() { var pole = document.getElementById("pole"); pole.style.height = "0"; } </script> <div id="menu" onmouseover="mouseOver()" onmouseout="mouseOut()"> Menu </div> <div id="pole" onmouseover="mouseOver()" onmouseout="mouseOut()"> <ul> </ul> </div>