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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop down lists, no idea how todo them.

    Hi i have problems doing drop down lists, i want it to be a horizonal hover drop down. It isn't working not matter what i do. Heres some of the code:

    Html:
    <div id="nav">
    <ul>
    <li id="active"><a href="#">Home</a></li>
    <li><a href="#">Travels</a></li>
    <li><a href="#">Comments</a></li>
    <li><a href="#">MBup</a></li>
    <li><a href="#">Flash Games</a></li>
    </ul>
    </div>
    </div>

    CSS:
    #nav {
    margin:20px auto;
    float: left;
    }

    #nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    }

    #nav a {
    display: block;
    color: #FFF;
    background-color: #036;
    width: 9em;
    padding: .2em .8em;
    text-decoration: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #036;
    border-bottom: 1px solid #036;

    }

    #nav a:hover
    {
    background-color: #369;
    color: #FFF;
    border-top: 1px solid #036;
    border-left: 1px solid #036;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;

    }

    #active a
    {
    display: block;
    color: #FFF;
    background-color: #600;
    width: 9em;
    padding: .2em .8em;
    text-decoration: none;
    }

    #nav li { margin: 0 0 .2em 0; }

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    How about all of the code? I’s not comprehensible how you wanna get a drop down menu with only one level of links?

    Try the Son of the Suckerfish menu.

  • #3
    New Coder
    Join Date
    Aug 2007
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts
    body {
    font-family:Arial, Helvetica, sans-serif;
    margin:0 auto;
    text-align:center;
    background-image:url(images/water.jpg);
    color:#FFFFFF;
    }

    #content {
    margin:0 auto;
    text-align:center;
    width:1000px;
    height:800px;
    }

    #nav {
    margin:20px auto;
    float: left;
    }

    #nav ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    }

    #nav a {
    display: block;
    color: #FFF;
    background-color: #036;
    width: 9em;
    padding: .2em .8em;
    text-decoration: none;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #036;
    border-bottom: 1px solid #036;

    }

    #nav a:hover
    {
    background-color: #369;
    color: #FFF;
    border-top: 1px solid #036;
    border-left: 1px solid #036;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;

    }

    #active a
    {
    display: block;
    color: #FFF;
    background-color: #600;
    width: 9em;
    padding: .2em .8em;
    text-decoration: none;
    }

    #nav li { margin: 0 0 .2em 0; }


    #header {

    }

    a {text-decoration:none; color:#FFFFFF;}

    and HTML
    <body>
    <div id="content">
    <div id="header"><img src="images/header.png"></div>
    <a href="http://olidixon.com">www.OliDixon.com</a>


    <div id="nav">
    <ul>
    <li id="active"><a href="#">Home</a></li>
    <li><a href="#">Travels</a></li>
    <li><a href="#">Comments</a></li>
    <li><a href="#">MBup</a></li>
    <li><a href="#">Flash Games</a></li>
    </ul>
    </div>
    </div>

    </body>
    </html>

  • #4
    Senior Coder twodayslate's Avatar
    Join Date
    Mar 2007
    Location
    VA
    Posts
    1,042
    Thanks
    67
    Thanked 39 Times in 39 Posts
    Please use the code tags when posting code

    CSSplay.co.uk is a great resource.
    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
    •