Grow your CSS skills. Land your dream job.

CSS Dropdown menu problems

  • # December 2, 2009 at 3:32 pm

    Hello,

    I am learning CSS, and I am having some problems with a drop down menu for a website I am working on.

    http://reformingtoscripture.com/test/

    For the drop down (only resources right now) it does not put them on top of each other even though I say display:block. What am I missing?

    Here is the code:

    Code:
    .file #navigation {
    width:780px;
    background:#EAE7DF url(http://i254.photobucket.com/albums/hh92/eblogtemplates/naturalessence/nanav.gif) repeat;
    height:41px;
    border-top:1px solid #996
    }

    .file #navigation ul {
    padding:0;
    margin:0;
    background-color:#F66;
    }

    .file #navigation li {
    float:left;
    list-style:none
    }

    .file #navigation li a{
    background:#FFF url(http://i254.photobucket.com/albums/hh92/eblogtemplates/naturalessence/nanav.gif) repeat-x;
    border-right:1px solid #C9C6B3;
    color:#553;
    display:block;
    line-height:41px;
    padding:0 14px;
    text-align:center;
    text-decoration:none;
    font-size: 11pt;
    font-weight:bold;
    font-family: Tahoma, Geneva, sans-serif;
    }

    .file #navigation li ul {
    display: none;
    }

    .file #navigation ul li a {
    display: block;
    }

    .file #navigation li:hover ul
    {
    display: block;
    }

    .file #navigation a:hover{
    background-position:left bottom;
    color:#221;
    }

    Thanks for any help.

    # December 3, 2009 at 10:57 am

    Howdy,

    The problem is that your submenu li is inheriting the float:left from the top menu li.

    To fix this you can create a new class for your submenu and "clear" the float:

    Code:
  • About
  • Resources

Then in your css file:

Code:
.mysubmenu li {
clear:both;
width:100px; /* set the width so your submenu items are all the same width */
}

You could also do this inline

But if you’re going to have multiple submenus, use a class so you won’t have to type out the inline code for each item.

# December 3, 2009 at 3:07 pm

Thanks a lot!

# January 17, 2010 at 2:09 pm

I’m pretty sure you can just do this:

Code:
#navigation li {
float: none;
}

Can’t you? It stops the inheritance of the float and makes it back into a list.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".