Açılır Menü Yardım

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ü

• Kategori 1


• Kategori 2
  
  
  
  • Kategori 2 alt 1
  
  
  • Kategori 2 alt 2
  
  
  
  
• Kategori 3

Buna benzer olacak.

body {
font-family: tahoma,calibri,arial;
}

* {
margin: 0;
padding: 0;
}
ul.menu {
text-align: center;
margin-top: 20px;
}
ul.menu li {
display: inline-block;
list-style: none;
padding: 5px;
position:relative;
}
ul.menu li ul{display:none;position:absolute;left:-15px;top:31px;width:150px;}
ul.menu li ul li{padding:3px 5px;}
ul.menu li:hover .sub{display:inline;}
ul.menu li:hover .sub li a{padding:0;}
ul.menu li a {
background: #252525;
border: 1px solid #101010;
border-radius: 3px;
padding: 5px;
color: #fff;
text-decoration: none;
}

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

• Kategori 1


• Kategori 2
  
  
  
  • Kategori 2 alt 1
  
  
  • Kategori 2 alt 2
  
  
  
  
• Kategori 3