Title: Dropdown menu without plugin
Last modified: August 19, 2016

---

# Dropdown menu without plugin

 *  [particlepat](https://wordpress.org/support/users/particlepat/)
 * (@particlepat)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/dropdown-menu-without-plugin/)
 * How do I create a horizontal drop down menu with out using the confusing plugins?
   I want to create a menu that will be reflected as I create pages, so when I create
   a child or even a grandchild of a page I won’t have to go back and edit the code.
   Can anyone help me out or point me in the right direction?

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

 *  [transpersonal](https://wordpress.org/support/users/transpersonal/)
 * (@transpersonal)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/dropdown-menu-without-plugin/#post-1149068)
 * I don’t get all the plugins for this purpose either, there’s no need for them.
   Here’s what I use:
 *     ```
       <ul id="navNew" class="dropdown dropdown-horizontal">
       <li id="n-shows"><a href="#">Something</a>
       <ul>
       	<li><a href="#">Item 1</a></li>
       	<li><a href="#">Item 2</a></li>
       	<li><a href="#">Item 3</a></li>
       	<li><a href="#">Item 4</a></li>
       	<li><a href="#">Item 5</a></li>
       </ul>
       </li>
       </ul>
       </ul>
   
       </ul>
       ```
   
 * And the CSS:
 *     ```
       ul.dropdown ul a {
               width: 133px;
       }
       ul.dropdown,
       ul.dropdown li,
       ul.dropdown ul {
               list-style: none;
               margin: 0;
               padding: 0;
       }
       ul.dropdown {
               position: relative;
               z-index: 597;
               float: left;
       }
       ul.dropdown li {
               float: left;
               line-height: 1.3em;
               vertical-align: middle;
               zoom: 1;
       }
       ul.dropdown li.hover,
       ul.dropdown li:hover {
              position: relative;
              z-index: 599;
              cursor: default;
       }
       ul.dropdown ul {
              visibility: hidden;
              position: absolute;
              top: 100%;
              left: 0;
              z-index: 598;
              width: 100%;
       }
       ul.dropdown ul li {
              float: none;
       }
       ul.dropdown ul ul {
              top: 1px;
              left: 99%;
       }
       ul.dropdown li:hover > ul {
              visibility: visible;
       }
       ul.dropdown li.rtl ul {
              top: 100%;
              right: 0;
              left: auto;
       }
       ul.dropdown li.rtl ul ul {
              top: 1px;
              right: 99%;
              left: auto;
       }
       ul.dropdown li a,
       ul.dropdown *.dir {
               border-style: solid;
               border: 1px;
               border-color: #404040;
       	background: url(styles/default/img/pigs.png) repeat-x;
       }
   
       /* Without this the drop down is not marginalized to the left */
   
       ul.dropdown ul {
       	left: auto;
       	right: 0;
       	width: 150px;
       	margin-top: -1px;
       	border-top: 1px solid #1a1a1a;
       	border-left: solid 1px #4c4c4c;
       	font:;
       }
       ```
   
 *  [transpersonal](https://wordpress.org/support/users/transpersonal/)
 * (@transpersonal)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/dropdown-menu-without-plugin/#post-1149073)
 * Oops, maybe I should have read your post fully, I see now that you wanted the
   newly created posts to automatically reflect in the menu without having to manually
   add them to the code (Which is what the code I gave above cannot do). I actually
   use that code only as a categories drop down so I don;t have that issue. Maybe
   someone has the answer to your question…
 *  Thread Starter [particlepat](https://wordpress.org/support/users/particlepat/)
 * (@particlepat)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/dropdown-menu-without-plugin/#post-1149100)
 * No but this is better than anything else I’ve seen. No one seems to be very helpful
   with this issue. Thanks, I will use this code for now.
 * Anyone else know how to code it with the php?
 *  [transpersonal](https://wordpress.org/support/users/transpersonal/)
 * (@transpersonal)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/dropdown-menu-without-plugin/#post-1149129)
 * particlepat Try this:
 *     ```
       <ul id="navNew" class="dropdown dropdown-horizontal">
       <li id="n-shows"><a href="#">Pages</a>
       <ul>
       <li><?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?></li>
       </ul>
       </li>
       </ul>
       </ul>
   
       </ul>
       ```
   
 * Keep the CSS the same.

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

The topic ‘Dropdown menu without plugin’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [transpersonal](https://wordpress.org/support/users/transpersonal/)
 * Last activity: [16 years, 10 months ago](https://wordpress.org/support/topic/dropdown-menu-without-plugin/#post-1149129)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics