Suckerfish Drop-down menu, Image replacement

[hcblankscreen]

So I'm a student working on my first real project. I've done Suckerfish drop-downs before, but I'm having trouble doing them with graphic text instead of system text. The image replacement works fine on the first level, but the nested li's just repeat the image of the main li.

For example, the main nav item with the drop-down is "Our Coffee". In the drop-down menu instead of having the different images for the corresponding links, "Our Coffee" is repeated.

The drop-down is on the "Our Coffee" link http://www2.hawaii.edu/~bhcb/new_kimo/our_coffee.html .

And here's a selection of my code where I think the problem is happening:

<div id="nav">
<ul id="dd">
<li id="hm"><a href="menu.html">Menu</a></li>
<li id="au"><a href="about_us.html">About Us</a></li>
<li id="oc"><a href="#">Our Coffee</a>
<ul>
<li id="oc_dd_ko"><a href="oc_kona.html">Kona</a></li>
<li id="oc_dd_ma"><a href="oc_maui.html">Maui</a></li>
<li id="oc_dd_ka"><a href="oc_kauai.html">Kauai</a></li>
</ul>
</li>
<li id="os"><a href="os_hy.html">Our Stores</a></li>
<li id="ols"><a href="online_store.html">Online Store</a></li>
<li id="oct"><a href="our_culture.html">Our Culture</a></li>
</ul>
</div>


#nav ul li ul li a {
display: block;
height: 0px;
overflow: hidden;
}

#dd li#oc a {
display: block;
width: 95px;
}

#dd li#oc {
float: left;
width: 95px;
}

#dd li#oc ul {
position: absolute;
width: 95px;
left: -9999px;
}

#dd li#oc:hover ul {
left: auto;
}


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

li#oc ul li a {
height: 0px;
display: block;
overflow: hidden;
}

#oc_dd_ko a {
background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
padding-top: 13px;
width: 58px;
}

#oc_dd_ko a:hover {
background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
padding-top: 13px;
width: 58px;
}

#oc_dd_ma a {
background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
padding-top: 15px;
width: 58px;
}

#oc_dd_ma a:hover {
background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
padding-top: 15px;
width: 58px;
}

#oc_dd_ka a {
background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
padding-top: 16px;
width: 58px;
}

#oc_dd_ka a:hover {
background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
padding-top: 16px;
width: 58px;
}

#dd, #dd ul {
padding: 0;
margin: 0;
list-style: none;
}


Any suggestions would be appreciated.

[bazz]

I don;t see any nav menu or any repeats. Maybe you're working on it still?

bazz

[hcblankscreen]

I don;t see any nav menu or any repeats. Maybe you're working on it still?

bazz

I figured I'd leave out some of the code to make it easier but here's the whole code for the nav.

#nav {
position: absolute;
margin: 528px 0 0 317px;
}

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

#nav ul li a {
height: 0px;
display: block;
padding-top: 17px;
overflow: hidden;
}

#nav ul li#hm a {
background: url(../images/nav-01_lo.gif);
width: 48px;
}

#nav ul li#hm a:hover {
background: url(../images/nav-01_hi.gif);
width: 48px;
}

#nav ul li#hm_select {
background: url(../images/nav-01_hi.gif);
width: 48px;
}

#nav ul li#au a {
background: url(../images/nav-02_lo.gif);
width: 77px;
}

#nav ul li#au a:hover {
background: url(../images/nav-02_hi.gif);
width: 77px;
}

#nav ul li#au_select {
background: url(../images/nav-02_hi.gif);
width: 77px;
}

#nav ul li#oc a {
background: url(../images/nav-03_lo.gif) no-repeat;
width: 95px;
}

#nav ul li#oc a:hover {
background: url(../images/nav-03_hi.gif) no-repeat;
width: 95px;
}

#nav ul li#oc_select a {
background: url(../images/nav-03_hi.gif) no-repeat;
width: 95px;
}

#nav ul li#os a {
background: url(../images/nav-04_lo.gif);
width: 90px;
}

#nav ul li#os a:hover {
background: url(../images/nav-04_hi.gif);
width: 90px;
}

#nav ul li#os_select a {
background: url(../images/nav-04_hi.gif);
width: 90px;
}

#nav ul li#ols a {
background: url(../images/nav-05_lo.gif);
width: 108px;
}

#nav ul li#ols a:hover {
background: url(../images/nav-05_hi.gif);
width: 108px;
}

#nav ul li#ols_select a {
background: url(../images/nav-05_hi.gif);
width: 108px;
}

#nav ul li#oct a {
background: url(../images/nav-06_lo.gif);
width: 90px;
}

#nav ul li#oct a:hover {
background: url(../images/nav-06_hi.gif);
width: 90px;
}

#nav ul li ul li a {
display: block;
height: 0px;
overflow: hidden;
}

#dd li#oc a {
display: block;
width: 95px;
}

#dd li#oc {
float: left;
width: 95px;
}

#dd li#oc ul {
position: absolute;
width: 95px;
left: -9999px;
}

#dd li#oc:hover ul {
left: auto;
}


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

li#oc ul li a {
height: 0px;
display: block;
overflow: hidden;
}

#oc_dd_ko a {
background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
padding-top: 13px;
width: 58px;
}

#oc_dd_ko a:hover {
background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
padding-top: 13px;
width: 58px;
}

#oc_dd_ma a {
background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
padding-top: 15px;
width: 58px;
}

#oc_dd_ma a:hover {
background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
padding-top: 15px;
width: 58px;
}

#oc_dd_ka a {
background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
padding-top: 16px;
width: 58px;
}

#oc_dd_ka a:hover {
background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
padding-top: 16px;
width: 58px;
}

#dd, #dd ul {
padding: 0;
margin: 0;
list-style: none;
}

[ninnypants]

Make sure this section

#oc_dd_ko a {
background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
padding-top: 13px;
width: 58px;
}

#oc_dd_ko a:hover {
background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
padding-top: 13px;
width: 58px;
}

#oc_dd_ma a {
background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
padding-top: 15px;
width: 58px;
}

#oc_dd_ma a:hover {
background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
padding-top: 15px;
width: 58px;
}

#oc_dd_ka a {
background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
padding-top: 16px;
width: 58px;
}

#oc_dd_ka a:hover {
background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
padding-top: 16px;
width: 58px;
}

Is below this

#nav ul li#oc a {
background: url(../images/nav-03_lo.gif) no-repeat;
width: 95px;
}

if it is opposite then the second section will reset what you declared in the first section and that may be what is causing your problem

[hcblankscreen]

Make sure this section

#oc_dd_ko a {
background: url(../images/oc_ddnav-01_lo.gif) no-repeat;
padding-top: 13px;
width: 58px;
}

#oc_dd_ko a:hover {
background: url(../images/oc_ddnav-01_hi.gif) no-repeat;
padding-top: 13px;
width: 58px;
}

#oc_dd_ma a {
background: url(../images/oc_ddnav-02_lo.gif) no-repeat;
padding-top: 15px;
width: 58px;
}

#oc_dd_ma a:hover {
background: url(../images/oc_ddnav-02_hi.gif) no-repeat;
padding-top: 15px;
width: 58px;
}

#oc_dd_ka a {
background: url(../images/oc_ddnav-03_lo.gif) no-repeat;
padding-top: 16px;
width: 58px;
}

#oc_dd_ka a:hover {
background: url(../images/oc_ddnav-03_hi.gif) no-repeat;
padding-top: 16px;
width: 58px;
}

Is below this

#nav ul li#oc a {
background: url(../images/nav-03_lo.gif) no-repeat;
width: 95px;
}

if it is opposite then the second section will reset what you declared in the first section and that may be what is causing your problem

Thank you! This wasn't the solution but it got me looking at exactly the right thing! When I targeted

#nav ul li#oc a {
background: url(../images/nav-03_lo.gif) no-repeat;
width: 95px;
}

I was targetting all of the <a>'s within that ul. That's why I got the image repetition. I had to give the main <a> it's own id and it's working right now!

Thank you again!

[little_leave]

Thank you! This wasn't the solution but it got me looking at exactly the right thing! When I targeted

#nav ul li#oc a {
background: url(../images/nav-03_lo.gif) no-repeat;
width: 95px;
}

I was targetting all of the <a>'s within that ul. That's why I got the image repetition. I had to give the main <a> it's own id and it's working right now!

Thank you again!
hi hcblankscreen
could you please post the correctly workin' code? i wonder what the secret is...

thx