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