try using this… it’s the open source code for the menus from the new revolution themes.. i found the suckerfish a bit too hard
CSS
#subnavbar {
background: #666666;
width: 960px;
height: 24px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#subnav {
margin: 0px;
padding: 0px;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
background: #85ACAC;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #666666;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #85ACAC;
margin: 0px;
padding: 6px 10px 6px 10px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
JS – stick it in your HEAD
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
if (!document.getElementsByTagName) return false;
var sfEls = document.getElementById("nav").getElementsByTagName("li");
// if you only have one main menu - delete the line below //
var sfEls1 = document.getElementById("subnav").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 you only have one main menu - delete the "for" loop below //
for (var i=0; i<sfEls1.length; i++) {
sfEls1[i].onmouseover=function() {
this.className+=" sfhover1";
}
sfEls1[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover1\\b"), "");
}
}
//
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
HTML
<div id="subnavbar">
<ul id="subnav">
<li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
<?php wp_list_categories('orderby=name&order=ASC&depth=3&hide_empty=0&title_li=&exclude=1'); ?>
</ul>
</div>
<div style="clear:both;"></div>
Questions:
Is the CSS code meant to replace my current subnav code? Where does it go?
The header code: on the bottom of what I currently have?
Also, where does the HTML go?
Sorry, not much of a code person.
Thanks
C
