Create WordPress Dropdown Menu with CSS

There are a few plugins that you can use to Drop-down Menu for wordpress but you also can making WordPress drop down menu with css to display your page links in a dropdown navigation bar.

Add 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>

add this code to  to 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 */