Is there an easy way to add a CSS-only drop down menu to this nav bar? The nav bar uses a single background image with background-repeat set to repeat-x.

http://www.diamondpackaging.com/green/
http://www.diamondpackaging.com/green/diamond8e.css

I tried modifying Stu Nichols' CSS menu (http://www.cssplay.co.uk/menus/dd_valid.html), but with no success.

Here is a good read: http://www.alistapart.com/articles/dropdowns/
Here is another good read on .htc hover: http://www.xs4all.nl/~peterned/csshover.html

Here's what I've done:

See it here

/* Drop down menu */
#mainlevel-toolbar {
   list-style: none;
   width: 96%;
   margin: 0 auto;
}

#mainlevel-toolbar li {
   float: left;
   position: relative;
   width: 16.6%;
}


#mainlevel-toolbar li:hover {
   background: url(../images/menu-bg-hover.gif) repeat-x top left;   
}

#mainlevel-toolbar li a {
   color: #ffffff;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   height: 30px;
   line-height: 30px;
   width: 100%;
   display: block;
}

#mainlevel-toolbar li ul {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   width: 180px;
   background-color: #000000;
   opacity: .5;
   -moz-opacity: .5;
   filter: alpha(opacity=50);
   border: 1px solid #ffffff;
   border-top: 0;
}

#mainlevel-toolbar li > ul {
   top: auto;
   left: auto;
}

#mainlevel-toolbar li:hover ul {
   display: block;
}

#mainlevel-toolbar ul li {
   width: 100%;
}

#mainlevel-toolbar ul li a {
   text-align: left;
   width: 90%;
   padding: 0 5%;
   line-height: 20px;
   height: 20px;
}

#mainlevel-toolbar ul li:hover a {
   background-color: #AAAAAA;
   color: #000000;
}

This will work in FF right away, but to get it to work in IE, you need to add a behavior file into the CSS. Add the following:

body {
   behavior: url(css/csshover.htc);
}

you need to put the csshover.htc file in the same folder/directory that the CSS file is in (unless you reference it differently).  You can get it from the .htc link I listed up top.

Maybe try one of these ?
http://www.alvit.de/css-showcase/css...s-showcase.php

Zincoxide, LadynRed,

Thank you for your recommendations. I have succesfully tried one of these options to create a drop-down menu in the navbar. It is called the AnyLink CSS Menu (Dynamic Drive).

The hybrid CSS+Javascript menu will work on any link and only requires a small Javascript file. Each menu is implemented as plain HTML (DIV) on the page, making the menu contents search engine friendly. The only drawback is that it does require Javascript.

Here is a report on a few others which I haven't been able to implement:

1. Stu Nichols' CSS menu (http://www.cssplay.co.uk/menus/dd_valid.html)
I tried modifying this but with no success.

2. Suckerfish Dropdowns (http://www.alistapart.com/articles/dropdowns)
This is easy to implement on a plain page but I cannot get it to work in the navbar.

3. Peterned CSS Hover (http://www.xs4all.nl/~peterned/csshover.html)
I can't seem to get this to work, even with the csshover.htc behavior file. I'll have to keep trying.

Test page
http://www.peaceofchristparish.org/C...d_cssmenu3.htm
http://www.peaceofchristparish.org/C..._diamond8d.css

Current page
http://www.diamondpackaging.com/green/
http://www.diamondpackaging.com/green/diamond8e.css

Wilbury

I personally really like the Suckerfish method. It takes some getting use to coding it but you can get it to work on a nav bar. Take a look:

http://64.247.42.212/~skategr8

The CSS that I provided earlier is what I used to get it to work. FireFox automatically works, but with IE you have to add the csshover.htc file. Using this method is very search engine friendly as it is all html <ul> lists. No javascript required (other than what is embeded in the behavior file).

Greetings all.

zincoxide I really like the drop down menu you created! I tried it on my website and ran into a couple of problems., Would you be willing to take a look at the code to see what I am doing wrong?

Here is the css

}
body {
    font-family: arial, helvetica, serif;
}

ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    }

li { /* all list items */
    float: left;
    position: relative;
    width: 10em;
}

li ul { /* second-level lists */
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
}

li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
}

li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
}

#content {
    clear: left;
}  

/* Drop down menu */
#nav {
   list-style: none;
   width: 96%;
   margin: 0 auto;
   background: url('www.truthforbusiness.com/images/menu-bg.gif') repeat-x top left;
}

#nav li {
   float: left;
   position: relative;
   width: 16.6%;
  
}


#nav li:hover {
   background: url('www.truthforbusiness.com/images/menu-bg-hover.gif') repeat-x top left;   
}

#nav li a {
   color: #ffffff;
   font-weight: bold;
   text-decoration: none;
   text-align: center;
   height: 30px;
   line-height: 30px;
   width: 100%;
   display: block;
}

#nav li ul {
   border-left:1px solid #ffffff; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; display: none;
   position: absolute;
   top: 100%;
   left: 0;
   width: 180px;
   background-color: #000000;
   opacity: .5;
   -moz-opacity: .5;
   filter: alpha(opacity=50);
   border-top: 0px none;
}

#nav li > ul {
   top: auto;
   left: auto;
}

#nav li:hover ul {
   display: block;
}

#nav ul li {
   width: 100%;
}

#nav ul li a {
   text-align: left;
   width: 90%;
   padding: 0 5%;
   line-height: 20px;
   height: 20px;
}

#nav ul li:hover a {
   background-color: #AAAAAA;
   color: #000000;

And here is my html.

<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("mainlevel-toolbar");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;

//--><!]]></script>

</head>

<body>

<ul id="nav">

    <li>Sunfishes
        <ul>
            <li><a href="">Blackbanded sunfish</a></li>
            <li><a href="">Shadow bass</a></li>
            <li><a href="">Ozark bass</a></li>
            <li><a href="">White crappie</a></li>

        </ul>
    </li>

    <li>Grunts
        <ul>
            <li><a href="">Smallmouth grunt</a></li>
            <li><a href="">Burrito</a></li>
            <li><a href="">Pigfish</a></li>

        </ul>
    </li>

    <li>Remoras
        <ul>
            <li><a href="">Whalesucker</a></li>
            <li><a href="">Marlinsucker</a></li>
            <li><a href="">Ceylonese remora</a></li>

            <li><a href="">Spearfish remora</a></li>
            <li><a href="">Slender suckerfish</a></li>
        </ul>
    </li>

</ul>

Thanks a lot, getting this menu worked out will really help me.

Ian