This Suckerfish menu version is a light-weight drop-down three-level horizontal menu.

To view an example of the Wordpress Suckerfish menu in action, hover over

“Pages | Categories | Archives | Links” at the top of this website.

Other examples of the Suckerfish menu used with WordPress can be found at

Invoke Media and RockinThemes.

How-to add the Wordpress Suckerfish menu to your website

In the header.php file, before the closing </div> for <div id=”header”>

(alternatively, before <hr />).

(note: you may need to center the menu using <center> …menu code… </center> and edit the style.css file to adjust the width of the menu to fit within your theme)

copy and paste:


<ul id="nav">
<li><a href="">Pages</a>
<ul class="pages">
<?php wp_list_pages('title_li=&depth=1');?>
</ul>
</li>
<li><a href="">Categories</a>
<ul class="categories">
<?php wp_list_cats();?>
</ul>
</li>
<li><a href="">Archives</a>
<ul class="archives">
<?php wp_get_archives('type=monthly');?></ul></li>
<li><a href="">Links</a>
<ul class="categories"><?php get_links(-1,'<li>', '</li>', ' - ');?>
</ul>
</li>
</ul>

In the style.css file, at the end

(note: you may need to make adjustments to the width of the menu to fit within your theme. For the default theme, width: 95%)

copy and paste:

#nav, #nav ul {
width : 100%;
height : 1.8em;
list-style : none;
font-weight : bold;
background : #faf5d7;
padding : 0;
margin : 0;
border : solid #eda;
border-width : 0;
}
#nav a {
display : block;
width : 10em;
width : 6em;
color : #7c6240;
text-decoration : none;
padding : 0.25em 2em;
border : none;
}
#nav li {
float : left;
padding : 0;
width : 10em;
}
#nav li ul {
position : absolute;
left : -999em;
height : auto;
width : 14.4em;
width : 13.9em;
font-weight : normal;
border-width : 0.25em;
margin : 0;
}
#nav li li {
padding-right : 1em;
width : 13em;
}
#nav li ul a {
width : 13em;
width : 9em;
}
#nav li ul ul {
margin : -1.7em 0 0 14em;
background: #faf5d7;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left : -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left : auto;
}
#nav li:hover, #nav li.sfhover {
background : #eda;
}