Şimdi şöyle izah edeyim;
Hani menünün üstüne gelince havalı bi şekilde arkaplan değişiyor ya transitions özelliği ile, işte gradient'li backgrounda verince olmuyor, ya da ben yapamadım.
Not : Bu arada gradient'i CSS3 ile verdim imaj yok
kodlar aşağıdaki gibidir.
<!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>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
});
</script>
<style type="text/css">
nav ul#menu{
width:900px;
height:40px;
margin:0 auto;
list-style:none;
background:#c03;
background:linear-gradient(top,#c03,#900);
background:-webkit-linear-gradient(top,#c03,#900);
background:-moz-linear-gradient(top,#c03,#900);
background:-ms-linear-gradient(top,#c03,#900);
font:12px tahoma;
padding:0;
}
nav ul#menu li {float:left;}
nav ul#menu li a {
text-decoration:none;
color:#fff;
display:block;
line-height:40px;
padding:0 20px;
transition:background .5s;
-webkit-transition:background .5s;
}
nav ul#menu li a:hover{
background:linear-gradient(top,#009CCC,#006F91);
background:-webkit-linear-gradient(top,#009CCC,#006F91);
}
</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>