<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    if (!document.getElementsByTagName) return false;
    var sfEls = document.getElementById("nav").getElementsByTagName("li");

    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }

}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

Next, you are going to to set up the navigation.  Check out the example code, then read the description of what it means below:

<div id="catnav">
  <div id="nav">

  <ul>
    <li><a href="http://yourdomain.com/">Home</a></li>
  </ul>

  <ul>
    <li><a href="http://yourdomain.com/page1/">Page One</a>
     <ul>
      <li><a href="http://yourdomain.com/page1sub1/">Page One Sub One</a></li>
      <li><a href="http://yourdomain.com/page1sub2/">Page One Sub Two</a></li>
     </ul>
    </li>
  </ul>

  <ul>
    <li><a href="http://yourdomain.com/page2/">Page Two</a>
     <ul>
      <li><a href="http://yourdomain.com/page2sub1/">Page Two Sub One</a></li>
      <li><a href="http://yourdomain.com/page2sub2/">Page Two Sub Two</a></li>
      <li><a href="http://yourdomain.com/page2sub1/">Page Two Sub Three</a></li>
     </ul>
    </li>
  </ul>

  </div>
</div>

The first HOME link has no dropdown, just the initial link.  The next cluster has a main link and then 2 sub pages in the dropdown and the last one has three sub links.

You can modify the link paths and how many dropdown sub links that you require.  Just make really sure that the first part of the code cluster starts with an <li>, but the ending </li> doesn’t come until the bottom of the cluster.  This has screwed me over a couple of times and I’ll save you the trouble.

The last thing you will need is the CSS.

#catnav {
  	padding: 0;
  	clear: both;
 	height: 32px;
 	width: 1000px;
 	background: #000;
  	position: absolute;
  	top: 85px;
        z-index: 100;
}

#nav {
  	list-style: none;
  	margin: 0;
  	padding: 0;
	position: relative;
	z-index: 100;
}

#nav ul {
  	margin: 0;
  	padding: 0;
}

#nav li {
  	float: left;
 	margin: 0;
 	padding: 0;
	list-style: none;
}

#nav a {
  	display: block;
  	line-height: 32px;
 	margin: 0 20px;
  	padding: 0;
  	font-size: 14px;
  	color: #fff;
	font-weight: bold;
}

#nav li a:hover {
  	color: #fff;
  	text-decoration: underline;
  	display: block;
}

#nav li ul {
  	list-style: none;
  	position: absolute;
  	width: 150px;
  	left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
  	left: auto;
}

#nav li li {
  	float: left;
  	margin: 0;
  	padding: 0;
 	width: 129px;
}

#nav li li a {
 	width: 129px;
  	height: 24px;
  	line-height: 24px;
  	color: #000;
  	border-bottom: 1px solid #000;
  	background: #c5c5c5;
  	margin: 0;
  	padding: 5px 20px 5px 15px;
}

#nav li li a:hover {
  	border-top: 1px solid #131f27;
  	background: #000;
  	padding: 5px 20px 5px 15px;
}

#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
  	position: static;
}

Obviously, you can and will modify this to make it fit for your site, but this should get you started.

Place this code in your functions.php -

add_action( ‘init’, ‘mf_text_based_image_links’ );

function mf_text_based_image_links() {

if ( function_exists( ‘mf_previous_image_link’ ) === false ) {
function mf_previous_image_link( $link_text=’Previous Image’ ) {
if ( $l = mf_adjacent_image_link( $link_text, true ) )
print $l;
else
print ‘<span class=”inactive”>’ . $link_text . ‘</span>’;
}
}

if ( function_exists( ‘mf_next_image_link’ ) === false ) {
function mf_next_image_link( $link_text=’Next Image’ ) {
if ( $l = mf_adjacent_image_link( $link_text, false ) )
print $l;
else
print ‘<span class=”inactive”>’ . $link_text . ‘</span>’;
}
}

if ( function_exists( ‘mf_adjacent_image_link’ ) === false ) {
function mf_adjacent_image_link( $link_text, $prev = true ) {
global $post;
$post = get_post($post);
$attachments = array_values(get_children( array(‘post_parent’ => $post->post_parent, ‘post_status’ => ‘inherit’, ‘post_type’ => ‘attachment’, ‘post_mime_type’ => ‘image’, ‘order’ => ‘ASC’, ‘orderby’ => ‘menu_order ID’) ));

foreach ( $attachments as $k => $attachment )
if ( $attachment->ID == $post->ID )
break;

$k = $prev ? $k – 1 : $k + 1;
if ( isset($attachments[$k]) )
return ‘<a href=”‘ . get_attachment_link( $attachments[$k]->ID ) . ‘”>’ . $link_text . ‘</a>’;
else
return false;
}
}
}

Then place this code in your image.php file where you want the navigation to appear -

<h2><small><?php mf_previous_image_link( ‘&laquo; Previous Photo’ ) ?></small> -
<a href=”<?php echo get_permalink($post->post_parent); ?>” rev=”attachment”><?php echo get_the_title($post->post_parent); ?></a> -
<small><?php mf_next_image_link( ‘Next Photo &raquo;’ ) ?></small></h2>

You can of course change the Previous Photo and Next Photo to whatever you prefer.