Wordpress Drop-Down Menu Tutorial

One of the problem most web developer and designer faces is the application of drop-down menus to their websites. Many plug-ins that are available to download on the internet but if you want to create your own drop-down menus for your website’s drop-down navigation, using CSS can achieve equal effect of what plug-ins can do.

Let’s Begin.

Add this code to your header:

<div id="links_bar">
    <ul>
         <li><a href="/<?php echo get_option('home'); ?>/">Home</a></li>
         <?php wp_list_pages('title_li=' ); ?>
     </ul>
</div>

The lines above allows you to display list of menus you created in your wordpress site..

Add this code to your CSS stylesheet (e.g style.css):

/* Menus drop-down */

#links_bar {
     width: 100%;
     height: 30px;
     color: #fff;
     background-color: #000;
     list-style: none;
}

/* Menu Principal */
#links_bar li a, #links_bar li a:visited {
      text-align: center;
      display: block;
      text-decoration: none;
      color: #fff;
      padding: 0px 9px 0 9px;
      margin: 0px 5px 0 0;
      line-height: 30px;
}

#links_bar li a:hover, #links_bar li a:visited:hover {
      color: #fff;
      text-decoration: none;
      background-color: #C0C0C0;
}
/* Sub-menus */
#links_bar li ul li a, #links_bar li ul li a:visited {
      width: 180px;
      text-align: left;
      display: block;
      text-decoration: none;
      color: #fff;
      padding: 0px 9px 0 9px;
      margin: 0px 5px 0 0;
      line-height: 30px;
      background-color: #000;
}
#links_bar li ul li a:hover, #links_bar li ul li a:visited:hover {
      color: #fff;
      text-decoration: none;
      background-color: #C0C0C0;
}
#links_bar li ul {position: absolute; visibility: hidden; list-style: none;}
#links_bar li:hover ul, #links_bar li.hover ul {visibility: visible;}
#links_bar li:hover ul ul, #links_bar li.hover ul ul {visibility: hidden;}
#links_bar li li:hover ul, #links_bar li li.hover ul {visibility: visible;}
#links_bar li li:hover ul ul, #links_bar li li.hover ul ul {visibility: hidden;}
#links_bar li li li:hover ul, #links_bar li li li.hover ul {visibility: visible;}
#links_bar li {float: left;}
#links_bar li ul li {float: none;}
/* Menus drop-down */

Customize your menu according to your preferences…

Pls. don’t forget to say thank you!

Original Post: CSS Drop-Down menu