I've found this script nesting months under years in a wordpress archive dropdown list.
<div class="blog-list-archive">
<?php
/**/
$years = $wpdb->get_col("SELECT DISTINCT YEAR(post_date)
FROM $wpdb->posts WHERE post_status = 'publish'
AND post_type = 'post' ORDER BY post_date DESC");
foreach($years as $year) :
?>
<li><a href="JavaScript:void()"><?php echo $year; ?></a>
<ul class="archive-sub-menu">
<? $months = $wpdb->get_col("SELECT DISTINCT MONTH(post_date)
FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'
AND YEAR(post_date) = '".$year."' ORDER BY post_date DESC");
foreach($months as $month) :
?>
<li><a href="<?php echo get_month_link($year, $month); ?>">
<?php echo date( 'F', mktime(0, 0, 0, $month) );?></a>
</li>
<?php endforeach;?>
</ul>
The output is this :
2014
January
October
2013
January
The script is limited and doesn't show the post under that month. I have tried to add it but no luck, i haven't coded for ages and can't figure out the solution. Other than showing posts i've wanted to add a post counter on year ( shows total number of posts on that year ) and month ( shows total number of posts on that month )
The jquery script to show the dropdown list
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.blog-list-archive li ul').hide();
jQuery('.blog-list-archive li a').click(function(){
jQuery(this).parent().addClass('selected');
jQuery(this).parent().children('ul').slideDown(250);
jQuery(this).parent().siblings().children('ul').slideUp(250);
jQuery(this).parent().siblings().removeClass('selected');
});
});
</script>