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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Add drop down option to existing menu?

    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.

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

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    http://htmldog.com/articles/suckerfish/dropdowns/ is a good article on making drop down menu, which might help.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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