Wrong approach of the toggleClass

Wrong approach of the toggleClass

I have moved my post from "starting' to "using" to see if I have more luck here. Any suggestion, idea, will be appreciated. If my question it's not clear, you can copy the code and try it next to a Jquery. You'll see that sometimes there is  some classes that aren't toggled to their initial state.
Anyway, thanks again. Follows the first post. And sorry to insist, but I can't really figure out what I'm doing bad.


Hello;
I'm trying to learn JQuery (I'm not a programmer). I did a menu that works but has some problems. In Firebug I can see that a class remains active and I can't understand why.
Thanks in advance.

Luis

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Stacker</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        //    Shows child and toggles itself to a class
            $("div[class$='OO']").hover(function(){
                $(this).toggleClass("OI");
                $(this).children("div:eq(0)").toggleClass("OI");
        //    Hovering children makes the class remain and gives a class to the parents   
                $(this).children("div:eq(0)").hover(function(){
                    $(this).toggleClass("OI");
                    $(this).prevUntil('.stacker').toggleClass("ROOT");
                        });
            });
    });
    </script>
    <style>
    body {background:#AAA;font-size:0.7em;}
    /* Menu*/
    .stacker{z-index:1000;position:absolute;top:0;left:0;width:100%;font-size:1.1em;font-weight:bold;text-align:left;background:#FFF;}
    .stacker a{display:block;padding:0.7em 1.4em;color:#777;text-decoration:none;white-space:nowrap}
    .stacker a:hover{color:#222;background:#CCC}
    .stackH-OO.ON.OI {color:#900}
    .ROOT {background:#333;}
    /* Menu first level element*/
    .stackV-OO{position:relative;float:left;width:auto}
    /* Menu second level element*/
    .stackH-OO{position:relative}
    /* Show hide vertical element*/
    .pileV-OO{position:absolute;display:none;background:#FFF}
    .pileV-OO.OI{display:block;}
    /* Show hide horizontal element*/
    .pileH-OO{position:absolute;width:auto;left:100%;top:0;display:none;background:#FFF;}
    .pileH-OO.OI{ display:block;background:#FFF;}
    </style>
    </head>
    <body>
    <div class="stacker">
        <div class="stackV-OO">
            <a href="#">StackH</a>
            <div class="pileV-OO">
                <div class="stackH-OO">
                    <a href="#">Hover… (1)</a></div>
                <div class="stackH-OO">
                    <a href="#">Hover gives class to parent(1)</a>
                    <div class="pileH-OO">
                        <div class="stackH-OO">
                            <a href="#">For test only</a>
                        </div>
                        <div class="stackH-OO">
                            <a href="#">For test only</a>
                        </div>
                        <div class="stackH-OO">
                            <a href="#">For test only</a>
                        </div>
                       
                        <div class="stackH-OO">
                            <a href="#">Same as before to (2)</a>
                            <div class="pileH-OO">
                                <div class="stackH-OO"><a href="#">Yet, but to (3)</a>
                                <div class="pileH-OO">
                                    <div class="stackH-OO"><a href="#">Guess what…(4)</a></div>
                                    <div class="stackH-OO"><a href="#">Hover gives class to parents(4)</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>   
        </div>
    </div>
    </div>
    </body>
    </html>