Need small help

I am wanting to have the text in the the three boxes go to the bottom when being hovered over using jquery and css

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en" lang="en">
    <title>Baeloh Software Solutions, LLC.</title>
    <link rel="stylesheet" type="text/css" media="screen" href="inc/styles/common.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="inc/styles/palette.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="inc/styles/splash.css" />
    <script src="inc/jquery/jquery.js" type="text/javascript"></script>
    <script src="inc/jquery/splash.js" type="text/javascript"></script>
    <script src="inc/jquery/palette.js" type="text/javascript"></script>
    <script src="inc/jquery/plugins/jquery.tablesorter.js" type="text/javascript"></script>
    <ul id="palette">
    <!-- <p id="logo">
        <img src="/inc/imgs/logo.png" alt="baeloh" />
    </p> -->
    <h1 id="logo" class="clear">baeloh</h1>
    <ul id="splash">
        <li class="splash_box"><a href="">web</a></li>
        <li class="splash_box"><a href="">desktop</a></li>
        <li class="splash_box"><a href="">mobile</a></li>


html, body  {
    background: #7A6A53;
    margin: 0; padding: 0;
    text-align: center;
/*p#logo {
    border: 10px solid #D9CEB2;
    width: 450px; height: 130px;
    margin-left: auto; margin-right: auto;

h1#logo {
    margin: 0; padding: 0;
    font-size: 76px;
    font-style: oblique;
    color: #D5DED9;

ul#splash {
    margin: 0 auto; padding: 0;
    background: #D5DED9;
    border-bottom: 5px solid #D9CEB2; border-top: 5px solid #D9CEB2;
    text-align: center;
    li.splash_box {
	position: relative;
        display: inline-table; list-style: none;
	width: 175px; height: 150px;
        margin: 10px; padding: 0px;
        background: #99B2B7;
        border: 5px solid #948C75;
    li.splash_box a {
        margin: 0; padding: 0;
        color: #7A6A53;
        font-size: 28px;
        font-weight: 900;
        text-decoration: none;
    li.splash_highlight {
	opacity: 0.5;


    // list styling and fade on hover
    $("#splash li").hover(function() {
        // ignore the line immediately below
        $("a").css("margin-top", "100px");
        $(this).addClass("splash_highlight").css("cursor","pointer").click(function() {
            // go to link nested in child anchor
            window.location.href = $(this).children("a").attr("href");
        // ignore the line immediately below
        $("a").css("margin-top", "50px");
        // on mouse out remove the class we have added on the mouse over