# Wordpress mulit-level dropdown

**URL:** <https://forum.kirupa.com/t/wordpress-mulit-level-dropdown/312419>\
**Category:** programming\
**Created:** [August 3, 2010, 3:22am UTC](https://forum.kirupa.com/t/wordpress-mulit-level-dropdown/312419 "2010-08-03T03:22:09Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daimz](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/daimz/32/2383_2.png) [@Daimz](https://forum.kirupa.com/u/Daimz)\
**Post date:** [August 3, 2010, 3:22am UTC](https://forum.kirupa.com/t/wordpress-mulit-level-dropdown/312419/1 "2010-08-03T03:22:09Z")

</div>

I am having a hard time making a multilevel drop down in wordpress and I was wondering if someone could shed some light on it for me.

I have got a menu working currently and it works as a drop down like:

\>Home  
\>products  
\>propd1  
\>prod2  
\>about

But I want to use page catagories so that it would go:

I am having a hard time making a multilevel drop down in wordpress and I was wondering if someone could shed some light on it for me.

I have got a menu working currently and it works as a drop down like:

\>Home  
\>products  
cat 1  
\>propd1  
\>prod2  
cat2 (just the words and no link)  
\>prod3  
\>about

I am currently doing this:  
jQuery:

```auto
 <script type="text/javascript">
jQuery(document).ready(function($) {
$("#nav ul").css({display: "none"}); // Opera Fix
$("#nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(); },function(){ $(this).find('ul:first').css({visibility: "hidden"}); }); </script>

```

Html

```auto
<ul id="nav">
	<? wp_list_pages('title_li=&sort_column=menu_order'); ?>	
</ul>

```

css

```auto
/*navigation*/
#nav {padding:0;margin:0;}
#nav li {position:relative;display:block;float:left;z-index: 90;}
#nav li a {display:block;float:left;height:23px;line-height:23px;padding: 0 20px;color:#999;text-decoration:none;font-size:12px;margin-right:5px;margin-left:5px;}
#nav li a:hover {background-color: #2e2e2e;color:#ff3333;}
#nav li ul li a {background-color: #2e2e2e;font-size:10px; color:#fff;}
#nav li ul li a:hover {background-color: #ff3333;color:#fff;}

/*sub navigation*/
#nav ul {position:absolute;top: 23px;left:0;padding:0; width:200px;} /*the top:30px command must be the same height as your parent LI so the dropdown displays below the main navigation*/
#nav ul a, #nav ul li {float:none;}

```

Sorry I know this is a long post but hopefully someone will know what I am meaning as I think Im just missing something simple.