Standard dropdown menu

Description

this code generates a standard dropdown mene based on WordPress parameters

this code generates a standard dropdown mene based on WordPress parameters

HTML Source Code

                        
                          <!--HTML Menu Starts-->
<div id="menu">
<ul id="nav">
    
<?php $args = array(
	'depth'        => 2,
	'show_date'    => '',
	'date_format'  => get_option('date_format'),
	'child_of'     => 0,
	'exclude'      => '',
	'include'      => '',
	'title_li'     => '',
	'echo'         => 1,
	'authors'      => '',
	'sort_column'  => 'menu_order, post_date',
	'link_before'  => '',
	'link_after'   => '',
	'walker' => '' ); ?>

<?php wp_list_pages( $args ); ?> 
</ul>
</div>

<!--HTML Menu Ends-->                        
                        

CSS Source Code

                        
                          /*Drop Down Menu Start*/

#menu {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid;
    float: left;
    font-family: calibri;
    margin-top: 20px;
    width: 100%;
}

#nav, #nav ul{
	margin:0;
	padding:0;
	list-style-type:none;
	list-style-position:outside;
	position:relative;
	line-height:1.5em; 
	z-index: 999;
}

#nav a {
    color: #FFFFFF;
    display: block;
    font-family: helvetica;
    font-size: 18px;
    height: 23px;
    margin-right: 4px;
    padding-top: 8px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase; 
}

#nav li:hover{
	background-color:#00A4E1;
	color:#ffffff;
}



#nav li {
    background: none repeat scroll 0 0 #F16820;
    float: left;
    position: relative;
    width: 135px;
}

#nav ul {
    display: none;
    margin-top: 0;
    padding-top: 2px;
    position: absolute;
}

#nav li, #nav ul {
    margin-right: 3px;
    width: 135px;
}

#nav li ul a {
	width: 125px;
	height: auto;
	float: left;
	text-align: left;
	padding-left: 10px;
}

#nav ul ul{
	top:auto;
}	

#nav li ul ul {
	left:12em;
	margin:0px 0 0 10px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
	display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
	display:block;
}


/*Drop Down Menu End*/                        
                        

JavaScript Code

                        
                          <!--Jquery Menu Starts-->
<script type="text/javascript">
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
		$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
		},function(){
		$(this).find('ul:first').css({visibility: "hidden"});
		});
}

 $(document).ready(function(){					
	mainmenu();
});
</script>
<!--Jquery Menu Ends-->                        
                        


Post Categories