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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help w/ Suckerfish Menu

    Hey there! This is my very first post on the forums and I'm very new to web development. I have been designing for a long time and finally figured it's time to start teaching myself how to program these sites.

    Right now I'm having a bit of an issue with constructing a Suckerfish Drop Down Menu with images. It's going to be a bit complicated but I don't think it's too bad. The first level of the drop down menu is pretty much already in place and working as it should; however, I'm a little stuck when it comes to the 2nd level and styling it, etc.

    The first level is simply rollover image buttons. Pretty simple. The 2nd level; however, I want to only be a BACKGROUND IMAGE that changes when it is rolled over. The CMS I plan on using will output text links on top of this background image. The text links will be static but if you mouse over them, the background image should change.

    With what I have so far, the "main menu" of the rollover graphic buttons displays just fine but the 2nd level will not hide. How do I get it to hide and only display once the parent is hovered over?

    Have a look:

    HTML:
    Code:
    <ul class="menu">
    	<li class="home"><a href="#">Home</a></li>
    	<li class="dancers"><a href="#">Dancers</a></li>
            	<ul id="nav">
            	<li>Profiles & Pics</li>
                <li>Schedules</li>
                <li>VIP</li>
            </ul>
    	<li class="gallery"><a href="#">Gallery</a></li>
        	<ul>
            	<li>Club Prebiew</li>
                <li>Dancers</li>
                <li>Girls At Play</li>
                <li>VIP</li>
            </ul>
    	<li class="specials"><a href="#">Specials</a></li>
        <li class="party"><a href="#">Private Party</a></li>
        <li class="contact"><a href="#">Contact</a></li>
        <li class="employment"><a href="#">Employment</a></li>
    </ul>
    CSS:
    Code:
    .menu {
    	list-style: none;
    	background: #000;
    }
    .menu li {	
    	height: 43px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    #menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    }
    #menu li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    .menu li a, .nav li a:visited {
    	display: block;
    	text-decoration: none;
    	text-indent: -9999px;
    	height: 43px;
    	background-repeat: no-repeat;
    }
    .home {background-image: url(images/m_home_ro.gif); width: 115px;}
    .home a {background-image: url(images/m_home.gif);}
    .dancers {background-image: url(images/m_dancers_ro.gif); width: 115px;}
    .dancers a {background-image: url(images/m_dancers.gif);}
    .gallery {background-image: url(images/m_gallery_ro.gif); width: 115px;}
    .gallery a {background-image: url(images/m_gallery.gif);}
    .specials {background-image: url(images/m_specials_ro.gif); width: 115px;}
    .specials a {background-image: url(images/m_specials.gif);}
    .party {background-image: url(images/m_party_ro.gif); width: 115px;}
    .party a {background-image: url(images/m_party.gif);}
    .contact {background-image: url(images/m_contact_ro.gif); width: 115px;}
    .contact a {background-image: url(images/m_contact.gif);}
    .employment {background-image: url(images/m_employment_ro.gif); width: 115px;}
    .employment a {background-image: url(images/m_employment.gif);}
    ul.menu li a:hover {background: none;}
    .menu li {float: left;}
    .menu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    }
    #nav li:hover ul ul, #nav li.sfhover ul ul {
    	left: -999em;
    }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Your HTML structure is incorrect. Your lists need to be inside of LI elements not outside of them. Also you are mixing up classes with IDs. You don't have an element with id="menu" but you do have one with class="menu" so your CSS is also incorrect. Try this for your CSS
    Code:
    .menu {
    	list-style: none;
    	background: #000;
    }
    .menu li {
    	height: 43px;
    	list-style: none;
    	background-repeat: no-repeat;
    }
    .menu li ul {
    	position: absolute;
    	width: 10em;
    	left: -999em;
    }
    .menu li:hover ul, #nav li.sfhover ul {
    	left: auto;
    }
    .menu li a, .nav li a:visited {
    	display: block;
    	text-decoration: none;
    	text-indent: -9999px;
    	height: 43px;
    	background-repeat: no-repeat;
    }
    .home {
    	background-image: url(images/m_home_ro.gif);
    	width: 115px;
    }
    .home a {
    	background-image: url(images/m_home.gif);
    }
    .dancers {
    	background-image: url(images/m_dancers_ro.gif);
    	width: 115px;
    }
    .dancers a {
    	background-image: url(images/m_dancers.gif);
    }
    .gallery {
    	background-image: url(images/m_gallery_ro.gif);
    	width: 115px;
    }
    .gallery a {
    	background-image: url(images/m_gallery.gif);
    }
    .specials {
    	background-image: url(images/m_specials_ro.gif);
    	width: 115px;
    }
    .specials a {
    	background-image: url(images/m_specials.gif);
    }
    .party {
    	background-image: url(images/m_party_ro.gif);
    	width: 115px;
    }
    .party a {
    	background-image: url(images/m_party.gif);
    }
    .contact {
    	background-image: url(images/m_contact_ro.gif);
    	width: 115px;
    }
    .contact a {
    	background-image: url(images/m_contact.gif);
    }
    .employment {
    	background-image: url(images/m_employment_ro.gif);
    	width: 115px;
    }
    .employment a {
    	background-image: url(images/m_employment.gif);
    }
    ul.menu li a:hover {
    	background: none;
    }
    .menu li {
    	float: left;
    }
    .menu li ul li {
    	float:none;
    }
    .menu:after {
    	content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    }
    #nav li:hover ul ul, #nav li.sfhover ul ul {
    	left: -999em;
    }
    And this for your HTML
    Code:
    <ul class="menu">
    	<li class="home"><a href="#">Home</a></li>
    	<li class="dancers"><a href="#">Dancers</a>
    		<ul id="nav">
    			<li>Profiles & Pics</li>
    			<li>Schedules</li>
    			<li>VIP</li>
    		</ul>
    	</li>
    	<li class="gallery"><a href="#">Gallery</a>
    		<ul>
    			<li>Club Prebiew</li>
    			<li>Dancers</li>
    			<li>Girls At Play</li>
    			<li>VIP</li>
    		</ul>
    	</li>
    	<li class="specials"><a href="#">Specials</a></li>
    	<li class="party"><a href="#">Private Party</a></li>
    	<li class="contact"><a href="#">Contact</a></li>
    	<li class="employment"><a href="#">Employment</a></li>
    </ul>
    You also need to tell your second level LI elements to not float which is what I did with
    Code:
    .menu li ul li {
    	float:none;
    }
    Lastly some of your rules don't make sense for the structure you have. If you were to use the last CSS rule you have your html would need to look like this
    Code:
    <ul class="menu">
    	<li class="home"><a href="#">Home</a></li>
    	<li class="dancers"><a href="#">Dancers</a>
    		<ul id="nav">
    			<li>Profiles & Pics
    				<ul>
    					<li>Club Prebiew
    						<ul>
    							<li>Club Prebiew</li>
    							<li>Dancers</li>
    							<li>Girls At Play</li>
    							<li>VIP</li>
    						</ul>
    					</li>
    					<li>Dancers</li>
    					<li>Girls At Play</li>
    					<li>VIP</li>
    				</ul>
    			</li>
    			<li>Schedules</li>
    			<li>VIP</li>
    		</ul>
    	</li>
    	<li class="gallery"><a href="#">Gallery</a>
    		<ul>
    			<li>Club Prebiew</li>
    			<li>Dancers</li>
    			<li>Girls At Play</li>
    			<li>VIP</li>
    		</ul>
    	</li>
    	<li class="specials"><a href="#">Specials</a></li>
    	<li class="party"><a href="#">Private Party</a></li>
    	<li class="contact"><a href="#">Contact</a></li>
    	<li class="employment"><a href="#">Employment</a></li>
    </ul>
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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