WordPress Sub Pages as Dropdown menu by css

2 Votes, Rating: 5

Tags: wp page dropdown menu, wp subpages menu

How to create subpages as Dropdown menu by css help in wordpress

To make a wordpress blog or Cms we need this a lot, even to make wordpress blog more user friendly, we require to add child pages (subpages) as dropdown. but as there not plugin i guess so many developer or site owners face problem. or hire developer to fix it.

Here we giving you very simple way to make a dropdown menu by css help. just you need to follow our steps and you are done !

Step 1

Css// add these in your theme css
/////////////////////////////////////

#nav, #nav ul{
 padding: 0;
 float:left;
 list-style: none;
}
#nav a {
 font-size:12px;font-family:Arial, Tahoma, Verdana;line-height:34px;text-transform:uppercase;font-weight:700;color:#dfdfdf;display:block;margin-right:5px;text-decoration:none;padding:0 20px 0 20px
}
#nav li {
 float: left;
 line-height:27px; 
}
#nav li a:hover {
background: none;
color:#50daf7;
}
#nav li ul {
 position: absolute;
 width: 15em;
 left: -999em;
 padding-top:0px;
}
#nav li:hover ul, #nav li.sfhover ul {
 left: auto;
 z-index:1000; 
}
#nav li ul li {
    background: #000;
 border-bottom:1px solid #1e2527; 
 border-left:1px solid #1e2527; 
 border-right:1px solid #1e2527;   
 line-height:18px; 
 width:20em;
}

////////////////////////

Step 2

now  search your theme’s header/ sidebar to replace as below

<?php wp_list_pages(’title_li=’ ); ?>

and replace this to

<ul id=”nav”>
               <?php wp_list_pages(’title_li=’ ); ?>             

 </ul>

that is it try and us know your comments and problems