Есть меню, у одного из пунктов есть выпадающее подменю. Осуществленно через <div> Код (Text): <div style='padding-left: 10; visibility:hidden; position:absolute; top:305; left:65%;'><BR> При при наведении на пункт меню JS код делает этот div visible. Но появляется он в разных местах в зависимости от ширины экрана. ( left:65% ) как можно решить проблему?
Взять элемент, относительно которого должно "выпасть" меню, вычислить его координаты через оффсет, и показать менюшку относительно этих координат с абсолютным позиционированием. Но есть более элегантное решение выпадающих менюшек HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <link rel="Stylesheet" href="./index.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script> var jsHover = function() { var hEls = document.getElementById("nav").getElementsByTagName("li"); if ( window.attachEvent && navigator.userAgent.indexOf("Opera") == -1 ) { for (var i=0, len=hEls.length; i<len; i++) { hEls[i].onmouseover=function() { this.className+=" jshover"; } hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); } } } } </script> <body> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">Новости</a> <ul> <li><a href="">компании</a> <ul> <li><a href="">внутренние новости</a></li> <li><a href="">внешнире новости</a></li> </ul> </li> <li><a href="">новости мировые</a> <ul> <li><a href="">новости Google</a></li> <li><a href="">новости MicroSoft</a></li> <li><a href="">новости Yahoo!</a></li> <li><a href="">новости IBM</a></li> <li><a href="">новости Yandex</a></li> </ul> </li> </ul> </li> <li><a href="">контакты</a></li> </ul> <script>jsHover();</script> </body> </html> и CSS к нему [css] body, div, td, p { font-family: Tahoma, Arial, Helvetica, "Times New Roman", sans-serif; font-size: 12px; } #nav, #nav ul { list-style: none; margin: 0; padding: 0; background: #999999; float: left; width: 100%; color: white; } #nav li { float: left; position: relative; background: #777777; width: 120px; } #nav a { color: #fff; text-decoration: none; display: block; width: 100px; padding: 10px; } #nav a:hover { color: #fff; background: #333; } #nav li:hover, #nav li.jshover { background: #333; } #nav li ul { display: none; position: absolute; padding: 0; width: 120px; } #nav li li a { width: 100px; background: none; } #nav li:hover ul, #nav li.jshover ul { display: block; } #nav li:hover li ul, #nav li.jshover li ul { display: none; width: 120px; top: 0px; left: 120px; } #nav li:hover li:hover ul, #nav li.jshover li.jshover ul { display: block; } [/css]