Need small help

JavaScript
1

I am wanting to have the text in the the three boxes go to the bottom when being hovered over using jquery and css
LIVE DEMO http://baeloh.com/
index.html

<?xml version="1.0" encoding="UTF-8"?>
<!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" xml:lang="en" lang="en">
<head>
    <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>
</head>
<body>
    <ul id="palette">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    
    <!-- <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="http://web.baeloh.com">web</a></li>
        <li class="splash_box"><a href="http://desktop.baeloh.com">desktop</a></li>
        <li class="splash_box"><a href="http://mobile.baeloh.com">mobile</a></li>
    </ul>
</body>
</html>

splash.css

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

splash.js

$(document).ready(function(){   
    // 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");
        });
    },function(){
        // ignore the line immediately below
        $("a").css("margin-top", "50px");
        // on mouse out remove the class we have added on the mouse over
        $(this).removeClass("splash_highlight");
    });
});