#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2009
    Posts
    1
    Rep Power
    0

    Help with CSS Drop-Down Menu


    I am looking for help with creating a CSS drop down menu. I found an example online, but I am unable to make it work for my site. I am trying make a horizontal drop down menu, but the menu is being displayed vertically, can someone please help.
    Thanks

    Below are my codes:

    [code=CSS]/********************** Header ***************************/


    #header {
    margin: 0px 0px 0px 0px;
    background-image:url(images/header.jpg);
    width:717px;
    height:288px;
    position:relative;
    }
    #header-container
    {
    position: absolute;
    top: 1em;
    left: 1em;
    }

    #header ul{
    background-color:#000000;
    width:711px;
    border: 3px solid #FFFFFF;
    display:block;
    top:255px;
    position:absolute;
    margin: 0px 0px 0px 0px;
    height:22px;
    padding:5px 0px 0px 0px;
    text-align:center;
    }
    #header a
    {
    text-align: center;
    display:block;
    border: 1px solid #555;
    white-space:nowrap;
    margin:0;
    padding: 0.3em;
    }

    #header a:link, #header a:visited, #header a:active /* menu at rest */
    {
    color: white;
    background-color: #000000;
    text-decoration:none;
    }

    #header a:hover /* menu on mouse-over */
    {
    color: #000000;
    background-color: #CCCCCC;
    text-decoration:none;
    }

    #header a.top_parent, #header a.top_parent:hover /* attaches down-arrow to all top-parents */
    {
    background-image: url(navdown_white.gif);
    background-position: right center;
    background-repeat: no-repeat;
    }

    #header a.parent, #header a.parent:hover /* attaches side-arrow to all parents */
    {
    background-image: url(nav_white.gif);
    background-position: right center;
    background-repeat: no-repeat;
    }

    #header ul
    {
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    width:9em; /* width of all menu boxes */
    /* NOTE: For adjustable menu boxes you can comment out the above width rule.
    However, you will have to add padding in the "#menh a" rule so that the menu boxes
    will have space on either side of the text -- try it */
    }

    #header li
    {
    position:relative;
    min-height: 1px; /* Sophie Dennis contribution for IE7 */
    vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
    }

    #header ul ul
    {
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
    }

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

    div#header li:hover
    {
    cursorointer;
    z-index:100;
    }

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

    div#header li:hover ul,
    div#header li li:hover ul,
    div#header li li li:hover ul,
    div#header li li li li:hover ul
    {display:block;}[/code]
    [code=HTML]<div id="container">


    <div id="header">
    <ul>

    <li><a href="index.html">Home</a></li>


    <li><a href="fbstats.html">Football</a></li>

    <li><a href="bbstats.html">Baseball</a></li>
    <li><a href="bio.html">Biography</a></li>

    <li><a href="televison.html">Television</a></li>
    <li><a href="cdbuy.html">CD/Book</a></li>
    <li><a href="video.html">Videos</a></li>
    </ul>
    </div>[/code]
    Last edited by Kravvitz; January 29th, 2009 at 10:57 PM. Reason: added [code] tags
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, mbly.

    Give "#header li" float:left

    P.S. It would be helpful if you put your code between [code][/code] tags in the future. I added them for you this time.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo