CSS Menu for Categories and Pages in WordPress

If you want to display the list of your categories and pages in your menu of your WordPress theme, it is strongly recommended for you to use CSS stylesheet menu. The following css and PHP code will help you to implement this. By using this code, the menu item and or the parent menu item that selected by user will be highlighted or selected automatically.

1. Open your .css file inside your theme directory, which typically its name is styles.css, and then add this code to that file:

   /*Page menu*/
    
   #foxmenucontainer{
   	height:33px;
   	background:url(images/menu.png) repeat-x;
   	display:block;
   	padding:0px 0 0px 0px;
   	font: 12px Tahoma,Century gothic,verdana, Arial, sans-serif;
   	font-weight:normal;
     border-bottom: 1px solid #FF5500;	
   
   	}
   #menu{
   	margin: 0px;
   	padding: 0px;
   	width:1000px;
   	background:url(images/menu.png) repeat-x;
   	height:33px;	
   	}
    
   #menu ul {
   	float: left;
   	list-style: none;
   	margin: 0px;
   	padding: 0px;
   	}
    
   #menu li {
   	float: left;
   	list-style: none;
   	margin: 0px;
   	padding: 0px;
   	border-right: 1px solid #FF5500;
   	border-bottom: 1px solid #FF5500;	
   	
   	}
    
   #menu li a, #menu li a:link {
   	color: #fff;
   	display: block;
   	margin: 0px;
   	padding: 10px 7px 9px 7px; 
   	}
    
   #menu li.current_page_item {
   	background: url(images/menua.png);
   	color: #fff;
   	display: block;
   	margin: 0px;
   }
    
   #menu li.current_page_parent {
   	background: url(images/menua.png);
   }
    
   #menu li a:hover {
   	background:url(images/menua.png) repeat-x;
   	color: #fff;
     margin: 0px;
   	padding: 10px 7px 9px 7px; 
   	text-decoration: none;
   	}
    
   #menu li a:active {
   	background: #FF5500;
   }
    
   #menu li li a, #menu li li a:link, #menu li li a:visited {
   	background: #FF5500; 
   	width: 150px;
   	color: white;
   	font-size: 13px;
   	font-family: tahoma, century gothic,Georgia,  sans-serif;
   	font-weight: normal;
   	float: none;
   	margin: 0px;
   	padding: 8px 10px 7px 10px;
   	border-bottom: 1px solid #FF7F2A;
   	}
    
   #menu li:hover ul li.current_page_item a,
   #menu li.sfhover ul li.current_page_item a {
   	background: url(images/menua.png);
   	color: #fff;
   	display: block;
   	margin: 0px;
   }
    
   #menu li li a:hover, #menu li li a:active {
   	background:url(images/menua.png) repeat-x;
   	color: #fff;
   	padding: 8px 10px 7px 10px;
   	}
    
   #menu li ul {
   	z-index: 9999;
   	position: absolute;
   	left: -999em;
   	height: auto;
   	width: 170px;
   	margin: 0px;
   	padding: 0px;	
   	}
    
   #menu li ul a { 
   	width: 140px;
   	}
    
   #menu li ul a:hover, #menu li ul a:active { 
   	}
    
   #menu li ul ul {
   	margin: -32px 0 0 170px;
   	}
    
   #menu li:hover ul ul, #menu li:hover ul ul ul, 
   #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
   	left: -999em;
   	}
    
   #menu li:hover ul, #menu li li:hover ul, 
   #menu li li li:hover ul, #menu li.sfhover ul, 
   #menu li li.sfhover ul, #menu li li li.sfhover ul {
   	left: auto;
   	}
    
   #menu li:hover, #menu li.sfhover { 
   	position: static;
   	}
    
    
   /* Category menu*/
    
   #catmenucontainer{
   	display:block;
   	padding:0px 0 0px 0px;
   	font: 12px tahoma,Century gothic,verdana, Arial, sans-serif;
   	font-weight:normal;
   	color: white;
   	background: #5FAF23;
   	}
    
   #catmenu{
   	margin: 0px;
   	padding: 0px;
   	width:1000px;
   	color: white;
   	background: #5FAF23;
   	height:33px;
   	border-top: 1px solid #50585f;
   	border-bottom: 1px solid #50585f;
   	}
    
   #catmenu ul {
   	float: left;
   	list-style: none;
   	margin: 0px;
   	padding: 0px;
   	background: #5FAF23;
   	}
    
   #catmenu li {
   	float: left;
   	list-style: none;
   	margin: 0px;
   	padding: 0px;	
   	background: #5FAF23;
   	}
    
   #catmenu ul li {
   	display: block;
   	float: left;
   	list-style-type: none;
   	margin: 0px; padding: 0px;
   	}
    
   #catmenu li.active {
   	background: #4BBD2B;
   }
    
   #catmenu li a, #catmenu li a:link, #catmenu li a:visited {
   	color: white;
   	display: block;
   	margin: 0px;
   	padding: 10px 15px 9px 15px;
   	border-right: 1px solid #80bc32;
   	}
    
   #catmenu li.current-cat {
   	color: white;	
   	background: #4B8C1C;
   	display: block;
   }
    
   #catmenu li a:hover {
   	background: #80bc32; 
   	color: white;	
     margin: 0px;
   	padding: 10px 15px 9px 15px;
   	text-decoration: none;
   	}
    
   #catmenu li a:active {
   	background: #4BBD2B;
   }
    
   #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
   	background: #80bc32;
   	width: 150px;
   	color: white;
   	font-size: 13px;
   	font-family: tahoma, century gothic,Georgia,  sans-serif;
   	font-weight: normal;
   	float: none;
   	margin: 0px;
   	padding: 8px 10px 7px 10px;
   	border-right: 1px solid #62af1c;
   	border-left: 1px solid #62af1c;
   	border-bottom: 1px solid #62af1c;
   	}
    
   #catmenu li li a:hover {
   	background: #74DC5A;
   	color: white;
   	padding: 8px 10px 7px 10px;
   	}	
    
   #catmenu li ul {
   	z-index: 9999;
   	position: absolute;
   	left: -999em;
   	height: auto;
   	width: 170px;
   	margin: 0px;
   	padding: 0px;
   	}
    
   #catmenu li li { 
   	}
    
   #catmenu li ul a { 
   	width: 140px;
   	}
    
   #catmenu li ul a:hover, #catmenu li ul a:active { 
   	}
    
   #catmenu li.current-cat-parent a, 
   #catmenu li ul.current-cat-parent a{
   	background: #4B8C1C;
   	color: #fff;
   	display: block;
   	margin: 0px;
   }
    
   #catmenu li:hover ul li.current-cat a,
   #catmenu li.sfhover ul li.current-cat a  {
   	background: #4B8C1C;
   	color: #fff;
   	display: block;
   	margin: 0px;
   }
    
   #catmenu li ul li ul  {
   	background: #aaaddd;
   	margin: -32px 0 0 170px;
   	}
    
   #catmenu li.current-cat-parent a,
   #catmenu li ul.current-cat-parent a, 
   #catmenu li ul li.current-cat-parent a{
   	background: #4B8C1C;
   	color: #fff;
   	display: block;
   	margin: 0px;
   }
    
    
   #catmenu li:hover ul ul, #catmenu li:hover ul ul ul, 
   #catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul {
   	left: -999em;
   	}
    
   #catmenu li:hover ul, #catmenu li li:hover ul, 
   #catmenu li li li:hover ul, #catmenu li.sfhover ul, 
   #catmenu li li.sfhover ul, #catmenu li li li.sfhover ul {
   	left: auto;
   	}
    
   #catmenu li:hover, #catmenu li.sfhover { 
   	position: static;
   	}
    
   #catmenu li li a.current {
   	background-color:#EDEFF0;
   	color:#382E1F;
   }

   Please adjust your images file that used by that styles.css file with yours.

2. Open your header.php file inside your theme directory, and add this following code:

   <?php 
     if (is_home()) {
       $home_menu = 'current_page_item';
     } else {
       $home_menu = 'page_item';
     }
   ?>
   <div id="foxmenucontainer">
     <div id="menu">
       <ul id="menu">			
         <li class="<?php echo($home_menu); ?>"><a class="home" title="<?php _e('Home', 'yourthemename'); ?>" href="<?php echo get_settings('home'); ?>/"><?php _e('Home', 'yourthemename'); ?></a></li>
    
   	<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
       </ul>
     </div>		
   </div>
   <div class="clear"></div>
   <div id="catmenucontainer">
     <div id="catmenu">
       <ul class="catmenu">
         <?php wp_list_categories('sort_column=name&title_li=&depth=4'); ?>
       </ul>
     </div>		
   </div>