Question

I am working on a little CSS3 menu.
Live example here: http://jsfiddle.net/e592S/

(the code is full is very long)

/*Fifth Box*/
@-webkit-keyframes myFifth {
    0% {
        right: 300px;
        top: 13px;
        background: #D0D0D0;
        opacity: 0;
    }

    100% {
        background: #909090;
        right: 300px;
        top: 63px;
        opacity: 1;
    }
}

#box.box5 {
    top: 113px;
}

#littlebox5 {
    top: 053px;
    position: relative;

}
#bothcontaine5:hover ~ .box5 {
    -webkit-transition: all 0s;
    right: 300px;
    top: 63px;
    -webkit-animation: myFifth .75s;
    -webkit-animation-fill-mode: initial;
    opacity: 1;
    background: #909090;
    right: 300px;
    -webkit-animation-fill-mode: initial;
}

#bothcontainer5:hover .littlebox-sentence {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#D0F2F9), to(#84CEFB));
}

#bothcontainer5:hover .triangle {
    border-right: 20px solid #909090;
}

the problem is that the fourth and the fifth doesn’t work, (the code is completly the same). the first second third boxes works fine.
My quastion is how can I solve this problem so all the boxes will work?

Wish for help. Thank

Answer 1

didn’t quite figure what the problem was but as @rob said you had, and maybe still have html errors, like multiple id’s, when id’s must be unique in the DOM, also for your own sanity when trying to debug you should try to DRY in your code
the same animation can be applied to all the boxes, you don’t have to repeat it for example.
What i did was refactor your code step by step starting with the id’s

<div class="box3 box">

corrected code : http://jsfiddle.net/e592S/1/