Beste leden,
Ik ben een beginner in javascript/jqeury en struikel dan helaas bij dit project over redelijk wat problemen.
Voorbeeld link:
http://www.unitedwar.nl/rick/fout/

als je over een van de links heen gaat stapelen de fouten zich al op.
- Je kunt niet normaal bij het submenu komen want als je van de link afgaat verdwijnt het submenu.
- De laatste link staat altijd een stukje naar beneden.
- De hover die bij het submenu zit hoort er niet, deze hoort enkel bij het hoofdmenu.
- Soms opent het submenu helemaal niet?

Html code:

PHP Code:

<div id="droplinetabs1" class="droplinetabs">
    <ul>
     <li><a href="#"> Contact </a>
      <ul>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
      </ul>
     </li>
     <li><a href="#"> Contact </a>
      <ul>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
      </ul>
     </li>
     <li><a href="#"> Contact </a>
      <ul>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
      </ul>
     </li>
     <li><a href="#"> Contact </a>
      <ul>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
      </ul>
     </li>
     <li><a href="#"> Contact </a>
      <ul>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
       <li><a href="#"> Contact </a></li>
      </ul>
     </li>
    </ul>
   </div> 


CSS code:

PHP Code:

 .droplinetabs{
height: 38px;
width: 850px;
margin-left: 58px;
margin-top: 9px;
float: left;
overflow: hidden;
}
.droplinetabs ul{
font-size: 12px;
font-family: arial;
margin-left: 10px;
padding: 0px;
height: 38px;
width: 850px;
list-style: none;
}
.droplinetabs li{
display: inline;
margin-left: 50px;
padding: 0;
}
.droplinetabs ul li a{
float: left;
color: white;
margin: 0 4px 0 0;
padding: 14px 0 0px 0;
text-decoration: none;
text-align: center;
width: 87px;
height: 38px;
}
.droplinetabs ul li a:hover, ul li a:active{
background-image: url('images/hover.png');
background-repeat: no-repeat;
width: 87px;
height: 38px;
color: white;
text-align: center;
}
 
/* Sub level menus*/
.droplinetabs ul li ul{
position: absolute;
z-index: 100;
left: 0;
top: 0;
font-family: arial;
font-size: 13px;
color: #3d4546;
}
/* Sub level menu links style */
.droplinetabs ul li ul li a{
font-family: arial;
font-size: 13px;
color: #3d4546;
padding-right: 8px;
padding-top: -10px;
margin: 0;
}
.droplinetabs ul li ul li a:hover{ /*sub menu links' background color onmouseover. Add rounded edges in capable browsers */
font-weight: bold;
} 


Javascript code:

PHP Code:

 /*********************
//* jQuery Drop Line Menu- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last updated: May 9th, 11'
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/
var droplinemenu={
arrowimage: {classname: 'downarrowclass', src: 'down.gif', leftpadding: 5}, //customize down arrow image
animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds
buildmenu:function(menuid){
 jQuery(document).ready(function($){
  var $mainmenu=$("#"+menuid+">ul")
  var $headers=$mainmenu.find("ul").parent()
  $headers.each(function(i){
   var $curobj=$(this)
   var $subul=$(this).find('ul:eq(0)')
   this._dimensions={h:$curobj.find('a:eq(0)').outerHeight()}
   this.istopheader=$curobj.parents("ul").length==1? true : false
   if (!this.istopheader)
    $subul.css({left:0, top:this._dimensions.h})
   var $innerheader=$curobj.children('a').eq(0)
   $innerheader=($innerheader.children().eq(0).is('span'))? $innerheader.children().eq(0) : $innerheader //if header contains inner SPAN, use that
   $curobj.hover(
    function(e){
     var $targetul=$(this).children("ul:eq(0)")
     if ($targetul.queue().length<=1) //if 1 or less queued animations
      if (this.istopheader)
       $targetul.css({left: $mainmenu.position().left, top: $mainmenu.position().top+this._dimensions.h})
      if (document.all && !window.XMLHttpRequest) //detect IE6 or less, fix issue with overflow
       $mainmenu.find('ul').css({overflow: (this.istopheader)? 'hidden' : 'visible'})
      $targetul.dequeue().slideDown(droplinemenu.animateduration.over)
    },
    function(e){
     var $targetul=$(this).children("ul:eq(0)")
     $targetul.dequeue().slideUp(droplinemenu.animateduration.out)
    }
   ) //end hover
  }) //end $headers.each()
  $mainmenu.find("ul").css({display:'none', visibility:'visible', width:$mainmenu.width()})
 }) //end document.ready
}
} 


Weet iemand waar deze fouten vandaan komen?
Alvast bedankt!
Rick

Ik zie in je css floats, positions en z-indexen voorbij komen. Drie items die voor veel problemen kunnen zorgen.
Verwijder alle css eens. En begin dan stukje bij beetje met opbouwen. Dan kom je vanzelf de fout een keer tegen.