Question

I want that the content goes to 50% when I hover over the menu bar. For whatever reasons I don’t get it done. I get it doen on a testing page where I just have 2 divs. As soon as I have more divs it does not work. Why not???
The page I am referring to is http://www.guntmarwolff.com/eigenschaftenv.php

Thank you in advance for your help!

    $(document).ready(function(){

      $("Layer5").mouseover(function(){
          $("header1").fadeTo('slow', 0.5);
      });

      $("Layer5").mouseout(function(){
          $("header1").fadeTo('slow', 1);
      });
  });

</script>


<div id="Layer5">
    <div style="position:relative; top:125px; left:480px; font-size:50px; z-index:1000;"><ul class="topmenu" id="css3menu1" name="css3menu1">
    <li class="topfirst"><a href="http://www.xy.com" style="height:26px;line-height:26px;">Home</a></li>
    <li class="topmenu"><a href="#" style="height:26px;line-height:26px;"><span>Info</span></a>


<div id="container1">
<div id="header1" class="header1">
  <div class="navbar1" style="position:relative;top:0px;left:-40px;z-index:1200px; id="about"><img src="headeigenschaftendeserfolgs.png" border="0"/></div>
  <p>
<p>

Answer 1

For a start, Id’s have a hash preceding their name:

id=”Layer5″

css

#Layer5 {} 

js (jquery)

$("#Layer5");

That fixed, you should sort your html.
This works for me:

 $(document).ready(function(){

  $("#Layer5 li a").hover( function() {
       console.log("in");
      $("#header1").fadeTo('slow', 0.5);
      }, 
  function () {
      console.log("out");
      $("#header1").fadeTo('slow', 1);
});

});

<div id="Layer5">
<div style="position:relative; top: 0px; left:80px; font-size:50px; z-index:1000;">
    <ul class="topmenu" id="css3menu1" name="css3menu1">
        <li class="topfirst"><a href="http://www.xy.com" style="height:26px;line-height:26px;">Home</a></li>
        <li class="topmenu"><a href="#" style="height:26px;line-height:26px;"><span>Info</span></a></li>
    </ul>
</div>

All my content