Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Suckerfish Drop-down menu, Image replacement

    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:

    Code:
    <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>
    Code:
    #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.

  2. #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,215
    Thanks
    39
    Thanked 201 Times in 197 Posts
    I don;t see any nav menu or any repeats. Maybe you're working on it still?

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  3. #3
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz View Post
    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.

    Code:
    #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;
    }

  4. #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    Make sure this section
    Code:
    #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
    Code:
    #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

  5. #5
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ninnypants View Post
    Make sure this section
    Code:
    #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
    Code:
    #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
    Code:
    #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!

  6. #6
    New to the CF scene
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by hcblankscreen View Post
    Thank you! This wasn't the solution but it got me looking at exactly the right thing! When I targeted
    Code:
    #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


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •