SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry horizontal drop down nav bars

    hi there can anyone help me i'm trying to make a horizontal drop down nav bar , the tabs which will need to be dop down are decks, killing time, and apparel.


    This is what i have come up with but my html and css wont work

    html:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>she's a lady skateboards</title>
    <meta http-equiv="content-type"content="text/html; charset=utf-8"/>
    <link href="style2.css" rel="stylesheet" type="text/css" />
    </head>

    <body>


    <div id="header">
    <img src=images_01.gif>
    </div>

    <div id="navigation">
    <ul>
    <li><a href="home.html">home</a></li>
    <li><a href="aboutus.html">About Us</a></li>
    <li><a href="decks.html">Decks</a>
    <li>January Decks</li>
    <li>Febuary Decks</li>
    <li>March Decks</li>
    <li>April Decks</li>
    </ul>
    </li>
    </ul>
    <li><a href="killingtime.html">Killing Time</a></li>
    <li><a href="http://www.myspace.com/shesaladyskateboards">Myspace</a></li>
    <li><a href="http://www.skatebook.co.uk">Skatebook</a></li>
    <li><a href="apparel.html">Apparel</a></li>
    <li><a href="contactus.html">Contact US</a></li>
    </ul>
    </div>










    </div>





    </body>

    </html>



    css:

    */ css practice*/



    #navigation {
    font-size: 90%;
    width:100%
    float:left;

    }
    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 1em;
    float:left;

    }

    #navigation li {
    display: inline;

    }
    #navigation a:link, #navigation a:visited {
    padding: 0.4em 1em 0.4em 1em;
    color: #FFFFFF;
    background-color: #ff72ff;
    text-decoration: none;
    border: 1px solid #000000;

    }
    #navigation a:hover {
    color: #FFFFFF;
    background-color: #ffff21;

    }




    #navigation li {position: relative;}

    #navigation ul ul {
    position: absolute;
    z-index: 500;
    }

    #navigation ul ul ul {
    top: 0;
    left: 100%;
    }



    div#navigation ul ul,
    div#navigation ul li:hover ul ul,
    div#navigation ul ul li:hover ul ul
    {display: none;}

    div#navigation ul li:hover ul,
    div#navigation ul ul li:hover ul,
    div#navigation ul ul ul li:hover ul
    {display: block;}


    if anyone can help would be very appreciated.


  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your html has errors in the list, sub-list start-tag is missing and an extra erroneus end-tag. Corrected, the dropdown should show.
    Code CSS:
    <div id="navigation">
    <ul>
    <li><a href="home.html">home</a></li>
    <li><a href="aboutus.html">About Us</a></li>
    <li><a href="decks.html">Decks</a>
      <ul>
        <li>January Decks</li>
        <li>Febuary Decks</li>
        <li>March Decks</li>
        <li>April Decks</li>
      </ul>
    </li>
    <li><a href="killingtime.html">Killing Time</a></li>
    <li><a href="http://www.myspace.com/shesaladyskateboards">Myspace</a></li>
    <li><a href="http://www.skatebook.co.uk">Skatebook</a></li>
    <li><a href="apparel.html">Apparel</a></li>
    <li><a href="contactus.html">Contact US</a></li>
    </ul>
    </div>
    Happy ADD/ADHD with Asperger's

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Erik, the DIV isn't necessary as you can apply the ID styles to the list directly.

    Also, Charlotte123's code isn't accessible either. She may be more interested in the Sons of Suckerfish menu instead.

    http://www.htmldog.com/articles/suckerfish/dropdowns/

  4. #4
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    still isnt working

    hi guys thank u for your help however the drop down menu is appearing but its just text, there not styled and they dont go vertically down?


    can u help please?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does the rest of the page look like? Sometimes there's a problem elsewhere which could negatively impact the menu - and I can guarantee you that the code I write is not likely to work if just "dragged and dropped" into most existing code.


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
  •