In the past, my drop downs have all been Javascript, but now that I’m more comfortable with CSS, I like the idea of a JS-free drop down menu. Not only is it way more accessible, it ensures that if your JS breaks, your page doesn’t break with it. Aesthetics aside, it also makes sure people can still get to your content.

CSS drop down menus take advantage of the :hover pseudo-class. Bonus: even Internet Explorer likes it!

The basic setup is this:

ul.parents {
    list-style: none;
    padding: 0px;
    margin: 0px;
}
ul.parents li {
    float: left;
    display: inline-block;
}

Now you have a nice row of list items. Then:

ul.parents li > ul {
    position: absolute;
    display: none;
    line-height: 100%;
    list-style: none;
    padding: 0px;
    margin: 0px;
}

ul.parents li:hover > ul {
    display: block;
    clear: both;
}

Now you have a list (your sub-menu items) that are hidden, but when you hover over the parent <li> element, the child list’s display: none; property is replaced with display: block. Brilliant!

I suppose it’s not rocket science, but it does feel like building your own house, or making mac-and-cheese from scratch. CSS wut wut!

There are a few solutions I suppose.

a) Publish and RSS feed, use jQuery’s $.getJSON( ); to pull in the data and access it iteratively, or

b) If you’re already familiar with the WP templating syntax, you might as well use what you know. This method also allows you to access a plethora of other WP functions and filtering options.

So, here we go:

<?php
define('WP_USE_THEMES', false);
require('blog/wp-load.php');
query_posts('');
?>

…where blog is the path to the root of your WordPress installation. With that in place, you can start your Loop and grab posts to your heart’s desire.