Merhaba, öncelikle internette araştırdım ve bulduğum oldu hatta yaptım oldu fakat bunlarda şöyle bir sorun oldu, bunların hepsi hazır tasarım olarak paylaşılmış ve benim menümün tasarımına uymuyor, bunları siteye uyguladığımda hem görüntüyü bozuyor hemde sitede kaymalar yaşanıyor.

CSS dosyasındaki kodlar; anladığım kadarıyla sadece ul.menu lü kısımlar menünün kodları :cool:

/* Arrow Style */

body {
font-family: tahoma,calibri,arial;
background: url(../img/bg.png);
}

* {
margin: 0;
padding: 0;
}

.ortala {
width: 640px;
margin: 0 auto;
}

.clear {
clear: both;
}

#header {
margin-top: 20px;
border-bottom: 2px solid #000;
}

#header .logo {
text-align: center;
}

ul.menu {
text-align: center;
margin-top: 20px;
}

ul.menu li {
display: inline;
list-style: none;
padding: 0.5em;
}

ul.menu li a {
background: #252525;
border: 1px solid #101010;
border-radius: 3px;
width: 150px;
padding: 5px;
color: #fff;
text-decoration: none;
}

ul.menu li a:hover {
background: #2d2d2d;
}

#content .video {
margin-top: 20px;
width: 640px;
height: 360px;
border: 1px solid #2d2d2d;
}

#content .video img {
width: 640px;
height: 360px;
}

#content .share {
float: left;
margin-top: 10px;
width: 300px;
}

#content .share p {
float: left;
color: #fff;
margin-top: 7px;
}

ul.sn {
margin-left: 10px;
float: left;
}

ul.sn li {
display: inline;
list-style: none;
padding-left: 10px;
}

#content .email {
float: right;
width: 200px;
margin-top: 10px;
}

#content .email input {
padding: 7px;
width: 185px;
border: 1px solid #ddd;
}

#story {
border-top: 2px solid #000;
color: #fff;
margin-top: 20px;
padding-top: 20px;
}

#story .title{
padding-bottom: 10px;
}

#footer {
border-top: 2px solid #000;
background: #262525;
min-height: 200px;
margin-top: 20px;
}

#footer .logo {
text-align: center;
}

#footer p {
color: #fff;
text-align: center;
}

#footer p a {
color: #fff;
text-decoration: none;
}


Yapmak İstediğim Menü



Buna benzer olacak.