...

View Full Version : Help w/ Suckerfish Menu



djhile
05-17-2012, 11:46 PM
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:

<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:

.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;
}

_Aerospace_Eng_
05-18-2012, 04:48 AM
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

.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

<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

.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

<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum