2 aşamalı bir açılır menü yapmaya çalışıyorum. Sorunum ise daha ilk kademe de mause linkin üzerine gelince sadece 1. menü açılması gerekirken 2. menünün de beraber açılması. Display:none kullanmama rağmen menü açılıyor bir yeri yanlış yapıyorum galiba.
Not : Css bilgim çok az.
Bilgili bir arkadaş yardım edebilirse çok sevinirim.
Liste kodu :
<ul id="nav">
<li><a href="#">Ürünlerimiz</a>
<ul>
<li><a href="#">1. Menü</a>
<ul>
<li><a href="#">1. Alt Menü</a></li>
<li><a href="#">2. Alt Menü</a></li>
</ul>
</li>
<li><a href="#">2. Menü</a>
<ul>
<li><a href="#">1. Alt Menü</a></li>
<li><a href="#">2. Alt Menü</a></li>
<li><a href="#">3. Alt Menü</a></li>
<li><a href="#">4. Alt Menü</a></li>
<li><a href="#">5. Alt Menü</a></li>
<li><a href="#">6. Alt Menü</a></li>
</ul>
</li>
</ul>
</li></ul>div#header ul#nav{height:40px;clear:both;padding-left:55px;border:1px solid #dbdbdb;-moz-border-radius-topright:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;-moz-border-radius-topleft:5px;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;background:#fff url('../images/nav_bg.png') repeat-x bottom left;list-style:none;position:relative;padding-top:20px}
div#header ul#nav li{display:inline;position:relative;padding-bottom:25px}
div#header ul#nav li a{text-decoration:none;padding:4px 13px 5px 13px;margin-right:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;font-family:"QlassikMedium";font-size:17px;color:#3e3e3e}
div#header ul#nav li.active a{background:#b6de3e;color:#fff;box-shadow:0px 0px 1px #aaa;border:1px solid #eaeaea;font-family:"QlassikBold"}
div#header ul#nav li ul{list-style:none;position:absolute;z-index:999999;top:38px;left:0;width:130px;background:#f2f2f2;
text-align:center;border:1px solid #ddd;border-top:none;padding:0px 0px 5px 0px;display:none;
margin:0;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:5px;border-bottom-right-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px}
div#header ul#nav li ul li{display:block;margin-bottom:0px;padding-bottom:0px;padding-left:10px}
div#header ul#nav li ul li a,div#header ul#nav li.active ul li a{display:block;padding:8px 0px 8px 0px;font-size:11px;font-weight:normal;color:#888;font-family:"Helvetica Neue",helvetica,sans-serif;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;border-bottom:1px solid #ddd}
div#header ul#nav li.active ul li a{background:none;border-top:none;border-left:none;border-right:none;border-color:#ddd;box-shadow:none;color:#666}
div#header ul#nav li ul li a:hover{color:#3d3d3d}h1,h2,h3{margin:0;padding:0;font-family:"QlassikMedium";font-size:34px;font-weight:normal;color:#3a3a3a}h1,h2,h3,h4,h5,h6{margin-bottom:10px}h1{font-size:34px;color:#333}h1 span{font-size:13px;font-style:italic;color:#999;position:relative;top:-5px;left:10px;font-family:"Helvetica Neue",helvetica,sans-serif}h2{font-size:29px}h3{font-size:23px}h4{font-size:20px;color:#2a2a2a}h5{color:#424242;font-size:15px}h6{font-size:13px;color:#2b2b2b}strong,b{color:#3a3a3a}.center{text-align:center}div.main_content{overflow:hidden;padding:25px 30px;border:1px solid #dbdbdb;border-top:none;border-bottom:none;background:#fff; margin-left:auto; margin-right:auto}
div#header ul#nav li ul li ul{display:none;list-style:none;position:absolute;z-index:999999;top:0px;left:20px;width:130px;background:#f2f2f2;text-align:center;border:
2px solid #ddd;border-top:2px;padding:0px 0px 5px 0px;margin:-1px 0px 0 205px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-right-radius:
5px;border-bottom-right-radius:5px;-moz-border-radius-bottomleft:5px;-webkit-border-bottom-left-radius:5px;border-bottom-left-radius:5px}
div#header ul#nav li ul li ul li{display:block;margin-bottom:0px;padding-bottom:0px;padding-left:10px}
div#header ul#nav li ul li ul li a,div#header ul#nav li.active ul li ul li a{display:block;padding:8px 0px 8px 0px;font-size:11px;font-weight:normal;color:#888;
font-family:"Helvetica Neue",helvetica,sans-serif;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;border-bottom:2px solid #ddd}
div#header ul#nav li.active ul li ul li a{background:none;border-top:none;border-left:none;border-right:none;border-color:#ddd;box-shadow:none;color:#666}
div#header ul#nav li ul li ul li a:hover{color:#3d3d3d}edit: en başta ki height değerini kaldırınca sorun çözüldü onun yerine padding-bottom kullandım.