Arkadaşlar kodlarım aşağıda ki gibidir, incelediğiniz de ne demek isteyeceğimi anlayacaksınız, menü aşağı doğru genişliyor lakin ben yukarı doğru genişlesin istiyorum.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Working with CSS</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">
body {background:#f0f0f0;}
ul#menu {width:960px;list-style:none;font:12px sans-serif;padding:0;margin:0 auto;height:40px;background:#fff;border:1px solid #ccc;margin-top:20px;}
ul#menu li {float:left;}
ul#menu li a {
text-decoration:none;
display:block;
height:40px;
line-height:40px;
color:#000;
padding-left:20px;
padding-right:20px;
padding-top:0px;
padding-bottom:0px;
transition:height 0.3s;
}
ul#menu li a:hover {
height:47px;
background:#000;
color:#fff;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Referanslar</a></li>
<li><a href="#">Vizyonumuz</a></li>
<li><a href="#">Misyonumuz</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Forumlar</a></li>
</ul>
</body>
</html>