Title: Dropdown Menu
Last modified: August 20, 2016

---

# Dropdown Menu

 *  [Drew Collins](https://wordpress.org/support/users/drewza1243/)
 * (@drewza1243)
 * [14 years ago](https://wordpress.org/support/topic/dropdown-menu-15/)
 * I’m currently working on a theme for iDevotees. The owner wants a dropdown menu.
   The menu has links to the homepage, other pages and categories on the top level
   and then the dropdown level shows the subcategories of the highlighted category.
 * I found a way to do it but the code spread the dropdown level across the page
   and made the page far too wide. To see what I mean, check out suburbanjunkie(
   dot)zxq(dot)net.
 * It would be awesome of someone could tell me what’s wrong or offer an alternative
   solution.
 * HTML/PHP:
 *     ```
       <ul id="nav2" class="clearfloat">
           <li><a href="<?php echo get_option('home'); ?>/" class="on">Home</a></li>
           <?php wp_list_pages('title_li=&depth=1');
           wp_list_categories('orderby=name&title_li=&depth=1');
           $this_category = get_category($cat);
           if (get_category_children($this_category->cat_ID) != "") {
               echo "<ul>";
               wp_list_categories('orderby=id&show_count=0&title_li=&child_of=&use_desc_for_title=1&depth=1'.$this_category->cat_ID);
               echo "</ul>";
           }
           ?>
       </ul>
       ```
   
 * CSS:
 *     ```
       #nav2{
           display: block;
           font-size:1.1em;
           height:50px;
           width:100%;
           padding: 0 50%;
       }
   
       #nav2, #nav2 ul {
           line-height: 1;
           list-style: none;
       }
   
       #nav2 a ,#nav2 a:hover{
           border:none;
           display: block;
           text-decoration: none;
       }
   
       #nav2 li {
           float: left;
           list-style:none;
           text-decoration: none;
           font-size: 15px;
           padding: 5px 5px;
           border-radius: 5px;
           margin: 10px 5px;
           box-shadow: 3px 3px 6px #CCC inset;
           font-family: Myriad Pro, sans-serif;
           background: #d3d5d7;
           font-weight: 100;
       }
   
       #nav2 li:hover {
           background: #59a4ff;
           box-shadow: 3px 3px 6px #4787d5 inset;
       }
   
       #nav2 a,#nav2 a:visited {
           display:block;
           font-weight:bold;
           padding:6px 12px;
       }
   
       #nav2 a:hover, #nav2 a:active {
           color:#fff;
           text-decoration:none
       } 
   
       #nav2 li ul {
           height: auto;
           left: 100px;
           position: absolute;
           z-index:999;
           width: 100%;
           padding: 0 50%;
       }
   
       #nav2 li li {
           width: auto;
       }
   
       #nav2 li li a,#nav2 li li a:visited {
           font-weight:normal;
           font-size:0.9em;
       }
   
       #nav2 li li a:hover,#nav2 li li a:active {
           color:#fff;
       } 
   
       #nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {
           left: 30px;
       }
       ```
   

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Harris O.](https://wordpress.org/support/users/hfort/)
 * (@hfort)
 * [14 years ago](https://wordpress.org/support/topic/dropdown-menu-15/#post-2748953)
 * You should use the navigation menu system which will give you full control of
   what menus you can add to the navigation.
    [http://codex.wordpress.org/Function_Reference/wp_nav_menu](http://codex.wordpress.org/Function_Reference/wp_nav_menu)
   [http://codex.wordpress.org/Navigation_Menus](http://codex.wordpress.org/Navigation_Menus)
   You may take a look at the twentyten theme to see how it’s done.
 * The method you’re using is kind of outdated.
 *  Thread Starter [Drew Collins](https://wordpress.org/support/users/drewza1243/)
 * (@drewza1243)
 * [14 years ago](https://wordpress.org/support/topic/dropdown-menu-15/#post-2749167)
 * Thanks, I figured it was fairly outdated.
 *  Thread Starter [Drew Collins](https://wordpress.org/support/users/drewza1243/)
 * (@drewza1243)
 * [13 years, 12 months ago](https://wordpress.org/support/topic/dropdown-menu-15/#post-2749181)
 * I tried the solution offered at [http://codex.wordpress.org/Navigation_Menus](http://codex.wordpress.org/Navigation_Menus)
   but I still have the same problem so it appears the problem is in the CSS.
 * The code in the header file is:
 * `<div id="nav2"><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ));?
   ></div>`
 *  [Harris O.](https://wordpress.org/support/users/hfort/)
 * (@hfort)
 * [13 years, 12 months ago](https://wordpress.org/support/topic/dropdown-menu-15/#post-2749228)
 * If all pages are still showing, this means you haven’t activated the menu yet.
   
   Go to appearance > Menus 1-Under the “Menu Name” give a name. e.g.: **main menu**
   and click on “create menu” 2-Under the “Theme locations > Header Menu dropdown
   > select the name you just created. > Save. If you check the site at this point,
   you should have no menus at all. Go back to menus and start adding the menus 
   you want. Don’t forget to save it.
 * Here is a video showing the steps mentioned above. [http://www.youtube.com/watch?v=G1Is6EmDnKI](http://www.youtube.com/watch?v=G1Is6EmDnKI)

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Dropdown Menu’ is closed to new replies.

## Tags

 * [dropdown](https://wordpress.org/support/topic-tag/dropdown/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 4 replies
 * 2 participants
 * Last reply from: [Harris O.](https://wordpress.org/support/users/hfort/)
 * Last activity: [13 years, 12 months ago](https://wordpress.org/support/topic/dropdown-menu-15/#post-2749228)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics