CSS菜单未居中； javascript不适用？

Question

I cant seem to get this animated CSS menu to work... a) it's not centered and I can't seem to get it centered (maybe because of conflicting UL elements in CSS?) and b) the javascript isn't applying at all.

See here for what's going wrong: http://runic-paradise.com/

and here for how it should work: http://runic-paradise.com/animated-menu.html

HTML:

<ul class="menu">
    <li class="green">
        <p><a href="#">Home</a></p>
        <p class="subtext">The front page</p>
    </li>
    <li class="yellow">
        <p><a href="#">About</a></p>
        <p class="subtext">More info</p>
    </li>
    <li class="red">
        <p><a href="#">Contact</a></p>
        <p class="subtext">Get in touch</p>
    </li>
    <li class="blue">
        <p><a href="#">Submit</a></p>
        <p class="subtext">Send us your stuff!</p>
    </li>
    <li class="purple">
        <p><a href="#">Terms</a></p>
        <p class="subtext">Legal things</p>
    </li>
</ul>

Javascript:

$(document).ready(function(){

    //Fix Errors - http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup/

    //Remove outline from links
    $("a").click(function(){
        $(this).blur();
    });

    //When mouse rolls over
    $("li").mouseover(function(){
        $(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

    //When mouse is removed
    $("li").mouseout(function(){
        $(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
    });

});

CSS:

ul.menu {
    margin: 0;
    padding: 0;
}

/*li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}*/

a.menu{
    color:#FFF;
    text-decoration:none;
}

p.menu{
    padding: 0px 5px;
}

.subtext{
    padding-top:15px;
}

/*Menu Color Classes*/
.green{
    background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.yellow{
    background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.red{
    background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.purple{
    background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

.blue{
    background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

Answer 1

Try this,

CSS

ul.menu{
    height: 50px;
    list-style: none outside none;
    margin: 0 auto;
    width: 500px;
}

And you can short li-classes like,

ul.menu li{
    width:100px;
    height:50px;
    float:left;
    color:#191919;
    text-align:center;
    overflow:hidden;
}

/*Menu Color Classes*/
.green{
    background:#6AA63B url('images/green-item-bg.jpg') top left no-repeat;
}    
.yellow{
    background:#FBC700 url('images/yellow-item-bg.jpg') top left no-repeat;
}    
.red{
    background:#D52100 url('images/red-item-bg.jpg') top left no-repeat;
}    
.purple{
    background:#5122B4 url('images/purple-item-bg.jpg') top left no-repeat;
}    
.blue{
    background:#0292C0 url('images/blue-item-bg.jpg') top left no-repeat;
}

Also your animation works and all your js loaded.

Answer 2

You're loading the scripts in wrong order.

<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

The first two scripts need jQuery to work, but it isn't available yet. Load jQuery first.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/animated-menu.js" type="text/javascript"></script>

Answer 3

i put link of easing.js download it and put it in your head tag

https://github.com/ai/easings.net