CSS menu breaking into a new line

I'm trying to use a CSS menu and everything seems to be working except the last 3 bullets are breaking off into a new line... and they should all be level. Any thoughts on what's going wrong? ((And... if you look at the live site here >> www.runic-paradise.com >> anyone know a way to stop the menu drop-downs from stretching the gray container box? :-/))

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>

CSS:

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

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

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

p{
    padding: 0px 5px;
}

    .subtext{
        padding-top:15px;
    }

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;
}