hi how to create a drop down top navigation menu with wordpress? I want to show categories as menu items, and their subcategories as drop down list.. please help
I tried that, but it dont make categories menu with subcategories list.. I want like this wphacks.com - top 3rd black horizontal menu.
this is what wp-hacks uses , css based menu drop down paste this in css .cat-menu { background:#F0F0F0 none repeat scroll 0 0; border-bottom:1px solid #CCCCCC; border-top:1px solid #CCCCCC; display:block; margin:auto; overflow:auto; } .cat-menu ul { display:block; float:left; list-style-image:none; list-style-position:outside; list-style-type:none; margin:5px; z-index:1000; } .cat-menu ul li a { color:gray; display:block; font-size:12px; font-weight:bold; padding:3px 10px; text-decoration:none; } .cat-menu ul li { color:#AAAAAA; float:left; } .cat-menu ul li.home { border-left:1px solid #E3E0D5; } .cat-menu ul ul { font-weight:400; height:auto; left:-999em; margin:auto; position:absolute; width:151px; } .cat-menu ul li li { width:149px; } .cat-menu ul li li a { border-bottom:1px solid #EEEEEE; min-width:130px; padding:3px 10px; } .cat-menu ul li ul ul { border-left:1px solid #E3E0D5; margin:-22px 0 0 149px; } .cat-menu ul li:hover li a, .cat-menu ul li ul li:hover li a, .cat-menu ul li ul li ul li:hover li a, .cat-menu ul li ul li ul li ul li:hover li a, .cat-menu ul li:hover li a, .cat-menu ul li ul li:hover li a, .cat-menu ul li ul li ul li:hover li a, .cat-menu ul li ul li ul li ul li:hover li a { color:#BBBBBB; } .cat-menu ul li:hover ul ul, .cat-menu ul li:hover ul ul ul, .cat-menu ul li:hover ul ul ul ul, .cat-menu ul li.sfhover ul ul, .cat-menu ul li.sfhover ul ul ul, .cat-menu ul li.sfhover ul ul ul ul { left:-999em; } .cat-menu ul li:hover ul, .cat-menu ul li li:hover ul, .cat-menu ul li li li:hover ul, .cat-menu ul li li li li:hover ul, .cat-menu ul li.sfhover ul, .cat-menu ul li li.sfhover ul, .cat-menu ul li li li.sfhover ul, .cat-menu ul li li li li.sfhover ul { left:auto; } .cat-menu ul li:hover, .cat-menu ul li.sfhover { color:#000000; } .cat-menu ul li:hover a, .cat-menu ul li ul li:hover a, .cat-menu ul li ul li ul li:hover a, .cat-menu ul li ul li ul li ul li:hover a, .cat-menu ul li:hover a, .cat-menu ul li ul li:hover a, .cat-menu ul li ul li ul li:hover a, .cat-menu ul li ul li ul li ul li:hover a { background:#FFFFFF none repeat scroll 0 0; color:#666666; opacity:0.95; } .cat-menu ul li.current_page_item a, .cat-menu ul li.current-cat-parent a, .cat-menu ul li.current-cat-ancestor a, .cat-menu ul li.current-cat a, .cat-menu ul li ul li.current-cat-parent a, .cat-menu ul li ul li.current-cat-ancestor a, .cat-menu ul li ul li.current-cat a, .cat-menu ul li ul li ul li.current-cat-parent a, .cat-menu ul li ul li ul li.current-cat-ancestor a, .cat-menu ul li ul li ul li.current-cat a { background:#FFFFFF none repeat scroll 0 0; color:#666666; } Code (markup): paste this in header or wherever you like show category bar <div class="cat-menu"> <ul><li class="page_item <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li> <?php wp_list_categories('depth=0&title_li=); ?> </ul> </div> Code (markup):
try it and its will show subcategories in the category bar , just try it its a wordpress inbuilt function