SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Thread: css dropdown

  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    France
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css dropdown

    Hi all,

    I have a css menu but need one of the menu elements to work as a drop down.

    Here is the code I am using
    Code:
    <ul id="navlist">
    <li id="active"><a href="index.html" >Home</a></li>
    <li><a href="location.html">Location</a></li>
    <li><a href="whyus.html">Why Choose Us</a></li>
    <li><a href="gallery/album.php?g2_itemId=38" >Photo Tour</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    <li><a href="new.html">New for 2007</a></li>
    <li><a href="travel.html">Travel Links</a></li>
    <li><a href="enquiries.html">Enquiries</a></li>
    </ul>
    with this css

    Code:
    #navlist
    {
    border-top: 3px solid #222;
    
    padding: 0 0 0 20px;
    margin: 0;
    background-color: #99CCFF;
    font-family: verdana,sans-serif;
    font-size: 10px;
    font-weight: bold;
    }
    
    #navlist li
    {
    display: inline;
    list-style: none;
    padding: 0;
    margin: 0;
    }
    
    #navlist #active
    {
    float: right;
    margin-right: 10px;
    visibility:hidden;
    }
    
    #navlist li a
    {
    text-decoration: none;
    border: 3px solid #000;
    padding: 0 8px 1px 8px;
    margin: 0 0px;
    background-color: #FFF;
    color: #000;
    }
    
    * html #navlist li a { padding: 0 8px; }
    
    #navlist li a:hover
    {
    background-color: #26A;
    color: #FFF;
    }
    I need an additional menu item (the dropdown) in under the photo gallery link. Can anyone help?

    Thanks,

    Richard

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This explains the technique:
    http://www.htmldog.com/articles/suckerfish/dropdowns/
    and this shows some improvements to it:
    http://www.positioniseverything.net/css-dropdowns.html
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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