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 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2008
    Posts
    19
    Thanks
    0
    Thanked 1 Time in 1 Post

    simple css drop menu not working

    At the suggestion of some here, I've re-written my page so it uses the cleanest html and css I can. I'm having trouble with the css dropdowns though. The tabs change color, but nothing drops down. It's placing the text I want in the dropdown next to the title tab. gingertown.org if you want to look at it there.

    HTML:
    Code:
    <html>
    
    <head>
    
    <style type="text/css"></style>
    
    <link rel="stylesheet" media="all" type="text/css" href="css/gingertown3.css"/>
    
    
    </head>
    
    <body>
    
    <div id="wrapper"> 
    
    <div id="header">
    
    <a href="http://www.dmsas.com"><img src="images/gingertown09f_7.jpg" align="left" border="none" alt="DMSAS - GINGERTOWN"/></a>
    
    </div>
    
    <div id="navbar">
    
    <ul>
    <li class="top">GINGERTOWN 2008</li>
    <li class="item"><a href="#">GINGERTOWN 2008</a></li>
    </ul>
    
    </div>
    
    
    
    
    <div id="main">
    main
    </div>
    
    
    <div id="footer">
    <p>© David M. Schwarz Architects, Inc.</p>
    </div>
    
    
    </div>
    
    </body>
    
    </html>

    CSS:
    Code:
    body {
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:76%; 
    color:white; 
    padding:0; 
    border:0; 
    margin:0; 
    background:black; 
    }
    
    a {
    color:white;
    }
    
    a:visited {
    color:white;
    }
    
    a:active {
    color:white;
    }
    
    a:hover {
    text-decoration:none;
    }
    
    #wrapper {
    width:1000px;
    margin:14px 0px 0px 0px; 
    }
    
    #header {
    width:1000px; 
    height:80px; 
    float:left;
    }
    
    #navbar {
    clear:both; 
    width:1000px; 
    height:20px; 
    background:red; 
    color:white; 
    font-size:11px;
    }
    
    #navbar ul { 
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 10px;
    }
    
    #navbar li { 
    margin:7px 10px 0px 0px; 
    list-style-type: none;
    list-style:none;
    display:block;
    float:left;
    width:140px;
    border-right:1px solid #fff;
    }
    
    #navbar li:hover { 
    margin:7px 10px 0px 0px; 
    list-style-type: none;
    display:block;
    float:left;
    width:140px;
    border-right:1px solid #fff;
    background:black;
    }
    
    #navbar li .item{display:none;}
    
    #navbar li:hover .item a {
    color:purple;
    text-decoration:none;
    }
    
    #navbar li:hover .item a:hover {
    color:orange;
    }
    
    #main {
    background:blue; 
    height:650px; 
    width:750px; 
    float:left;
    position: relative; top: 20px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 20px 10px;
    }
    
    #footer {
    clear:both; 
    width:1000px; 
    height:20px; 
    background:red; 
    color:white; 
    font-size:11px;
    position: relative; top: 20px;
    }
    
    #footer p { 
    margin:6px 0px 0px 10px; 
    float:left;
    }

  • #2
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    19
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks. I've been using both of those and a couple more. It looks like I have everything from their pages. The problem is that I can't find what I'm missing.

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    What are you supposed to see in the dropdown menu when there are no sublinks?
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!

  • #5
    New Coder
    Join Date
    Nov 2008
    Posts
    19
    Thanks
    0
    Thanked 1 Time in 1 Post
    Code:
    <li class="top">GINGERTOWN 2008</li>
    <li class="item"><a href="#">GINGERTOWN 2008</a></li>
    I thought that's what these lines were doing? The top should be what stays visible and the item should be in the drop menu.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    The css should be in the order -
    Link

    Visited

    Hover

    Active.

    ==============

    see here for info


    Frank
    Last edited by effpeetee; 11-14-2008 at 12:44 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    perhaps this simple bit of code will make this click for you
    Code:
    css:
    span { display: none;}
    a:hover span { display: block; }
    
    html:
    <a href="#" title="link">Link<span>Description</span></a>
    twitter | Quality Hosting - $5.95/mo*
    Feel free to PM me!


  •  

    Posting Permissions

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