<!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> Aşağı doğru değil de Yukarı doğru açılmasını istiyorum
2
●635
- 02-10-2013, 23:53:33
Üyeliği durdurulduArkadaş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.
- 03-10-2013, 10:21:21şöyle yapılabilir hocam;
<!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:all 0.3s; } ul#menu li a:hover { margin-top: -7px; padding-top: 7px; 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>canlı örnek;
http://codepen.io/anon/pen/sbqcp - 03-10-2013, 16:58:28 Üyeliği durdurulduÇok teşekkür ederim hocam oldujebias adlı üyeden alıntı: mesajı görüntüle
