Wordpress sitemde nav menude kategorileri aşağıdaki kod ile sıralıyorum. Fakat hatalı cıkıyor. Aşağıya koymuş olduğum resimde göreceksiniz alt kategorinin cıkması gereken yerde normal kategori cıkıyor, normal kategoinin cıkması gereken yerde de sadece üzerine tıklamak icin mouse imleci cıkıyor. Üzerine gelince de alttaki pembe sütun acılıyor ve normal kategori orada cıkıyor.
Ben ne yapmak istediğimi aşağıdaki resimde paylaştım. Kodları veriyorum. Nerede hata yapiyorum söylerseniz sevinirim. Sanırım <span> kodunu eklediğim yerde veya kategori listeleme kodunda hatam var. Çünkü şu an alt kategorileri hiçbir şekilde göstermiyor.
Aşağıdaki Nav Menu kodları
<!-- BEGIN TOP NAVIGATION -->
<div id="navigation11">
<div id="navigation-inner11" class="clearfix">
<div id="catmenucontainer">
<div class="homeico">
<a href="<?php bloginfo('home'); ?>"><img src="http://www.kirmizioje.com/wp-content/themes/kirmizioje/images/anasyf.gif" width="37" height="34" alt="" /></a>
</div>
<div id="catmenu">
<ul> <?php
$categories = get_categories();
foreach ($categories as $cat) {
echo '<li><a href="'.get_option('home').'/'.get_option('category_base').'/'.$cat->category_nicename.'/"><span>'.$cat->cat_name.'</span></a></li>';
}
?></ul>
</div>
</div>
</div> <!-- end div #navigation-inner -->
</div> <!-- end div #navigation -->
<!-- END TOP NAVIGATION -->Bu da CSS Kodlarım#navigation11 { width:961px; height:45px; display: block; margin: 0 auto; background:url(images/anamenubg.jpg) no-repeat;}
#navigation-inner11 { margin: 0 auto; width: 980px; position: relative; border: 0px solid #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background: url(images/bg-nav.gif) repeat-x top center; -moz-box-shadow: 0 0 1px #ccc; -webkit-box-shadow: 0 0 1px #ccc; box-shadow: 0 0 1px #ccc; }
#catmenucontainer{
height:40px;
float: left;
display:inline;
padding-left: 0;
width: 765px;
font-size: 10px;
font-weight:normal;
font-family: Verdana;
color: #ffffff;
}
#catmenu ,#catmenu ul {
margin: 0; padding-left: 40px; padding-top: 8px; list-style-type: none; color: #ccc;
}
#catmenu a {
padding: 9px 15px 10px; display: block; text-decoration: none; color: #ffffff;
}
#catmenu a:hover {
background:url(images/menuara.jpg) repeat-x;
color: #000000;
display: block;
text-decoration: none;
}
#catmenu li { float: left; margin: 0; padding: 0; display:block; border:none; background:url(images/menuaraa.jpg) right no-repeat; background-position:0 1px;}
#catmenu li a {display: block; color: #f0f0f0; text-decoration: none; padding: 10px 15px; }
#catmenu li a:hover {background:url(images/menuara.jpg) repeat-x; background-position:bottom; display:block;}
#catmenu li:hover {background:url(images/menuara.jpg) repeat-x; background-position:bottom; display:block;}
#catmenu li span {background:url(images/altmenu.png) no-repeat; _background:url(images/altmenu_ie.jpg) no-repeat; position:absolute; top:45px; left:80px; display: none; width:805px; height:33px; padding-top:5px; padding-left:40px; color: #fff; z-index: 1;}
#catmenu li:hover span {height:30px;display: block; float:left;}
#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 100px;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background: url(images/menuara.jpg) repeat-x top center;
width: 100px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color: #cccccc;
border:1px solid #ccc;
}
#catmenu li li a:hover, #catmenu li li a:active {
background: url(images/menuara.jpg) repeat-x top center;
width: 100px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#000000;
border:1px solid #ccc;
}
#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}
#catmenu li:hover ul {
left: auto;
display: block;
}
#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
.homeico {
float: left;
padding-top:9px;
padding-left: 18px;
}Bu da resim.