...

View Full Version : Add drop down option to existing menu?



jessica726
01-05-2010, 06:11 AM
I've been at this for days and cannot find a solution that works.

On the tabbed menu shown here: http://www.hyenacart.com/zingslings I need to make a few of the tabs drop down a list when hovered over. (i.e. under Social Networking I'd like to add a link to Twitter page and Facebook page) Below is the css and html coding for the menu. If anyone could point me in the right direction it would be greatly appreciated.


#topnav {
list-style: none;
padding: 0;
margin: 0;
width: 882px;
height: 50px;
background: url(/menu/navbckgd.gif) repeat-x;
position: relative;
}

#topnav span {
display: none;
position: absolute;
}

#topnav a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

#topnav a:hover {
background-position: left bottom;
}

#topnav a:hover span {
display: block;
}

#topnav .home {
width: 100px;
height: 35px;
background: url(/menu/homebtn.gif) no-repeat;
left: 76px;
top: 15px;
}

#topnav .gallery {
width: 100px;
height: 35px;
background: url(/menu/gallerybtn.gif) no-repeat;
left: 176px;
top: 15px;
}

#topnav .about {
width: 100px;
height: 35px;
background: url(/menu/aboutbtn.gif) no-repeat;
left: 276px;
top: 15px;
}

#topnav .sizing {
width: 100px;
height: 35px;
background: url(/menu/sizingbtn.gif) no-repeat;
left: 376px;
top: 15px;
}

#topnav .findus {
width: 100px;
height: 35px;
background: url(/menu/findusbtn.gif) no-repeat;
left: 476px;
top: 15px;
}

#topnav .guest {
width: 100px;
height: 35px;
background: url(/menu/guestbtn.gif) no-repeat;
left: 576px;
top: 15px;
}

#topnav .social {
width: 126px;
height: 35px;
background: url(/menu/socialbtn.gif) no-repeat;
left: 676px;
top: 15px;
}


And here is the html (I haven't set up the link urls yet)


<ul id="topnav">
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="gallery">Gallery</a></li>
<li><a href="#" class="about">About Us</a></li>
<li><a href="#" class="sizing">Sizing</a></li>
<li><a href="#" class="findus">Find Us</a></li>
<li><a href="#" class="guest">Guest Spots</a></li>
<li><a href="#" class="social">Social Networking</a></li>
</ul>

abduraooft
01-05-2010, 08:45 AM
http://htmldog.com/articles/suckerfish/dropdowns/ is a good article on making drop down menu, which might help.

jessica726
01-05-2010, 02:45 PM
Thank you. That's actually one of the articles I read yesterday and tried but it didn't work. I'll try again today and see if maybe I missed something.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum