Accordeon Menue macht plötzlich seltsame Dinge........

  • Hallo Ihr lieben Leute,


    ich bastel seit kurzem an einer Seite rum und habe ein JavaScript Menue eingebunden.Bis gestern lief es auch genau so wie es sollte. Heute macht es Sachen die ich mir nicht erklären kann.
    Eigentlich war nur ein Farbwechsel als hooverefekt eingerichtet. Jetzt bleibt die Farbe gleich, dafür rückt die Schrift plötzlich nach rechts und ist nicht mehr links am Rand sondern rechts.
    Das ist das Menue und die Seite von der ich es eingebunden habe: http://www.dynamicdrive.com/dy…ddaccordionmenu-arrow.htm
    Kann sich das jmd. bitte ansehen und mir sagen was passiert ist ??????


    Das ist mein html code:


    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <link href="autec.css" rel="stylesheet" type="text/css" />


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>


    <script type="text/javascript" src="ddaccordion.js">


    /***********************************************
    * Accordion Content script- (c) Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
    * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
    * This notice must stay intact for legal use
    ***********************************************/


    </script>


    <script type="text/javascript">


    //Initialize Arrow Side Menu:
    ddaccordion.init({
    headerclass: "menuheaders", //Shared CSS class name of headers group
    contentclass: "menucontents", //Shared CSS class name of contents group
    revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
    mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: false, //persist state of opened contents within browser session?
    toggleclass: ['unselected', 'selected'], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ['class1', 'class2']
    togglehtml: ['none', '', ''], //Additional HTML added to the header when it's collapsed and expanded, respectively ['position', 'html1', 'html2'] (see docs)
    animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
    oninit:function(expandedindices){ //custom code to run when headers have initalized
    //do nothing
    },
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
    //do nothing
    }
    })


    </script>


    <style type="text/css">


    .arrowsidemenu{
    width: 200px;
    border-size: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #000000;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    }
    .arrowsidemenu div a{ /*header bar links*/
    font: bold 12px Verdana, Arial, Helvetica, sans-serif;
    display: block;
    background: transparent url(arrowgreen.gif) 100% 0;
    height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
    padding: 4px 0 4px 10px;
    line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
    text-decoration: none;
    }
    .arrowsidemenu div a:link, .arrowsidemenu div a:visited{
    color: #000000;
    }
    .arrowsidemenu div a:hover{
    background-position: 100% -32px;
    background-color: #CC0000;
    }
    .arrowsidemenu div.unselected a{ /*header that's currently not selected*/
    color: #000000;
    }
    .arrowsidemenu div.selected a{ /*header that's currently selected*/
    color: #FFF;
    background-position: 100% -64px !important;
    }
    .arrowsidemenu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    .arrowsidemenu ul li{
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #000000;
    }
    .arrowsidemenu ul li a{ /*sub menu links*/
    display: block;
    font: normal 12px Verdana, Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: black;
    padding: 5px 0;
    padding-left: 10px;
    border-left-width: 10px;
    border-left-style: double;
    border-left-color: #FF0000;
    }
    .arrowsidemenu ul li a:hover{
    background-color: #CC0000;
    color: #FFF;
    }
    </style>
    </head>


    Vielen Dank schon mal im voraus!
    Daniel