Drop Down Menu der er placeret omkring midten

Det er således at plads 1 er under menu 1 og menu 2. Og plads 2 er under 3 & 4.

Hvad er problemet?

Hvis du bare skal have den placeret i midten er det et css problem og ikke et javascript problem.

Det er at når browservinduet er mindre end topbarens bredde så placeres vinduet forkert i forhold til menuen.

Der skal noget mere på banen hvis nogen skal kunne svare på det spørgsmål. Vi har jo ingen mulighed for at regne ud hvad du har lavet uden et link eller noget kode.

Eller hvis de gør vinduet mindre efter siden er loaded.

Har lavet det i CSS og det virker nogenlunde:
#menu1 {
position: absolute;
z-index: 12;
left: 50%;
top:140px;
margin-left: -215px;
width: 230px;
height: 60px;
visibility: visible;
background-color:fuchsia;
}

Men der er problemet at hvis vundet er mindre end 950px eller hvis man minimere vinduet at den så ikke holder sin placering

Er nået så langt:
<script language="javascript">
function TopMenuOver(img_on,img_id,fromCenter,menuid){
var myWidth = 0;
var posLeft = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth) ) {
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth) ) {
    myWidth = document.body.clientWidth;
  }
  if(myWidth < 950){
  posLeft = 260;
  }
  else {
  posLeft = Math.round((myWidth/2) + fromCenter);
  }
  document.getElementById(menuid).style.display = "block";
  document.getElementById(img_id).style.src = img_on;
 
}
function TopMenuOut(img_off,img_id,menuid){
document.getElementById(menuid).style.display = "none";
document.getElementById(img_id).style.src = img_off;
}
</script>


Men kan menuen forsvinder når jeg ønsker at køre musen over menuen.

At du ændrer posLeft afhængig af vinduets størrelse er den rigtige måde at løse det på, så du er godt på vej.
Det er dog ikke så hensigtmæssigt at gøre det ved hver eneste onmouseover event.

Du bør lave menu placeringen i en seperat funktion og så kalde den ved onload og ved onresize.

function posMenu() {
...
}

window.onload = posMenu;
window.onresize = posMenu;

Jeg har også lidt svært ved at hvor du bruger din posLeft variabel? Det ser ud til at du bare udregner den, men opdaterer din klasse?

Hvis hele menuen forsvinder er det nok fordi din posLeft udregning bliver forkert og den derfor bliver placeret udenfor det synlige område. Prøv at lav alert(posLeft); for at være sikker på den er indenfor det område der skal være synligt.

Du har tjekket af din position fungerer i andre opløsninger ikke? Ellers kommer du i problemer uanset hvad, og bør vælge en anden løsning.

En mere simpel løsning kan måske være at sætte en centreret div med menuen i. Og så bare manipulere den højde den skal være i.
Den skal så placeres udenfor det almindelige design, evt. helt i top eller bund.

<div class="centreret">
<div id="menu1">
bla bla
</div>
</div>

Så den måde vil menuen være centreret i alle opløsninger, og da højden (formegentlig) er fast, vil det ikke give problemer.

Er kommet så langt:
var closetimer    = 0;
function TopMenuOver(img_on,img_id,fromCenter,menuid){
var myWidth     = 0;
var posLeft     = 0;


  if( typeof( window.innerWidth ) == 'number' ) {
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth) ) {
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth) ) {
    myWidth = document.body.clientWidth;
  }
  if(myWidth < 950){
  posLeft = 476 + fromCenter;
  }
  else {
  posLeft = Math.round((myWidth/2) + fromCenter);
  }
  document.getElementById(menuid).style.display = "block";
  document.getElementById(menuid).style.left = posLeft + "px";
  document.getElementById(img_id).style.src = img_on;
 
}
function TopMenuOut(img_off,img_id,menuid){
document.getElementById(menuid).style.display = "none";
document.getElementById(img_id).style.src = img_off;
}

function TopMenuOutTimer(img_off,img_id,menuid)
{
    closetimer = window.setTimeout(TopMenuOut(), 500);
}


function TopMenuCancelClose()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

På menuen har bruger jeg følgende funktioner:
MouseOver: TopMenuOver
MouseOut: TopMenuOver

På menuen der bliver vist bruger jeg:
MouseOver: TopMenuCancelClose
MouseOut: TopMenuOutTimer

Men menuen fjerner sig ikke. Nogen forklaring?