Dostum background ve transition tanımlamaların yanlış yerde ama doğru yerde olsa da çalışmazmış. Tarayıcılarımız henüz background gradient'i animate yapacak kadar zeki değilmiş. Ben şöyle bir trik yaptım, umarım işine yarar.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Responsive Web Design</title>
    <style type="text/css">
        nav ul#menu {
            width: 900px;
            height: 40px;
            margin: 0 auto;
            padding: 0;
            list-style: none;
            font: 12px Tahoma;
        }

        nav ul#menu li {
            float: left;
        }

        nav ul#menu li a {
            display: block;
            position: relative;
            z-index: 1;
            padding: 0 20px;
            line-height: 40px;
            color: #fff;
            text-decoration: none;

            /* webkit gradient background */
            background: -webkit-linear-gradient(top, rgb(204, 0, 51), rgb(153, 0, 0));
        }

        nav ul#menu li a:before {
            width: 100%;
            height: 100%;
            display: block; 
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0;

            /* webkit gradient background */
            background: -webkit-linear-gradient(top, rgb(0, 156, 204), rgb(0, 111, 145));

            /* webkit transition */
            -webkit-transition: all 500ms linear;

            /* before hack */
            content: ".";
            text-indent: -99999px;
        }

        nav ul#menu li a:hover:before {
            opacity: 1;
        }
    </style>
</head>
<body>

    <nav>
        <ul id="menu">
            <li>
                <a href="#">
                    Anasayfa
                </a>
            </li>
            <li>
                <a href="#">
                    Hakkımızda
                </a>
            </li>
            <li>
                <a href="#">
                    Misyonumuz
                </a>
            </li>
            <li>
                <a href="#">
                    Vizyonumuz
                </a>
            </li>
            <li>
                <a href="#">
                    Foto Galeri
                </a>
            </li>
            <li>
                <a href="#">
                    Referanslar
                </a>
            </li>
            <li>
                <a href="#">
                    İletişim
                </a>
            </li>
        </ul>
    </nav>

</body>
</html>
Link: http://codepen.io/azizarslan/pen/xsoje