basti1012.bplaced.net

Guten Tag, ich versuche ein horizontales Menü zu programmieren, so wie dieses unterhalb des Banners auf dieser Seite steht: <a href="https://en.99designs.de/categories">Graphic Design Services | 99designs</a> ich habe jetzt die Abfrage des Containers und das ganze bewegt sich auch schon, leider habe ich probleme mit der Maus. Bei "onmousemove" muss ich immerzu die Maus bewegen damit sich das Menü bewegt. Ich möchte aber dauerhaft: "wenn die Maus über dem Menü-Container steht oder bewegt, soll sich das Menü bewegen".

Code

                                    
                                <script src="/js_webseite/jquery.js"></script>
<style>
  *{
  margin:0;
  padding:0;
}
#lmenue{
  width:100vw;
  height:200px;
  margin:100px auto;
  border:2px solid black;
  position:absolute;
  overflow:hidden;
}
#lmenue ul{
    width:200vw;
    display:flex;
    height:100%;
    border:2px solid red;
  position:absolute;
 left:0vw;
}
ul li{
  flex:1;
  text-align:center;
  border:2px solid green;
  list-style:none;
}
ul li a{
  height:200px;
  line-height:200px;
}
  
</style>
<div id="lmenue">
    <ul>
        <li><a href="1"> Punkt 1 </a></li>
        <li><a href="2"> Punkt 2 </a></li>
        <li><a href="3"> Punkt 3 </a></li>
        <li><a href="4"> Punkt 4 </a></li>
        <li><a href="5"> Punkt 5 </a></li>
        <li><a href="6"> Punkt 6 </a></li>
        <li><a href="7"> Punkt 7 </a></li>
        <li><a href="8"> Punkt 8 </a></li>
    </ul>
</div>
<script>
  var con=$("#lmenue");
con.hover(function(){
   con.children().mousemove(function(e){
   var left = (e.pageX- con.parent().offset().left)/(con.width()/100);
   con.children().css({'left':'-'+left+'%','transition':'2000ms all'});
  });
})
  
</script>