Grow your CSS skills. Land your dream job.

Dropdown Newbie: MY DROPDOWN WON’T WORK

  • # April 3, 2013 at 1:53 am

    Hi, I am creating a navigational menu with dropdown effect…or am trying to. I love the site thus far.

    But it won’t work. I either mess up the whole menu that half of the things in it go flying off-screen because it’s embedding the UL, or it won’t appear when I hover over it. I looked at some dropdown tutorials, got the tutorial drop-downs to work, but not mine. I think it’s the background image messing everything up. I really need help with this, sorry for the unclean code, but I seem to have tried a few things to get it to work, and like I said, I’m a n00b:
    This is my HTML:

  • Testimonials
  • Contact

This is my CSS:

.menu
{
height:94px;
padding-top:10px;
width:100%;

}

.menu.a
{
color:white;

}

.menu ul
{
height:57px;
font-size:18px;
width: 620px;
margin-left:0px;
background-image: url(images/menubg.gif);
background-repeat: repeat-x;
float:right;
padding-right:20px;
}

.menu ul li
{height:10px;
color:white;
font-size:16px;
margin-top:8px;
margin-right:2px;
padding-top:7px;
padding-bottom:19px;
font-family:Arial, Helvetica, sans-serif;
padding-right:7px;
padding-left:7px;

}

.menu ul a
{color:white;
text-decoration:none;
}

.menu ul li:hover
{background:#0f5baa;
cursor:pointer;
-moz-box-shadow: inset 0 0 5px 5px #006699;
-webkit-box-shadow: inset 0 0 5px 5px #006699;
box-shadow: inset 0 0 5px 5px #006699;
}

.menu ul li ul
{visibility:hidden;
display:none;
}

.menu ul li:hover ul
{display:block;
list-style:none;
}

.menu li:hover ul li
{background:blue;
float:none;
position:absolute;
}

.menu li:hover ul li a
{color:white;
background:blue;
float:none;
position:absolute;
}

When I do this, not only does the dropdown not work, it also kicks away any other lis in the navigation. Neither visiblity:hidden, nor display:none work. Either Alone or together. They just hide the UL but the space is still taken up.

help?

# April 3, 2013 at 3:39 am

You aren’t being specific enough in your selectors.

.menu ul

will reference **ALL** menus in the div with a class of .menu.

Likewise

.menu ul li

will reference **all** list items.

If you want to reference **just the top ul then try the direct decendent selector `>`

.menu > ul

will select **only** the top level menu

.menu >ul > li

selects only the li that are direct children of the top level ul…..and so on.

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

# April 4, 2013 at 10:57 am

Hello, thank you for the great reference! Very useful.

But… I tried the parent > child selector:

.menu
{
height:94px;
padding-top:10px;
width:100%;

}

.menu .a
{
color:white;
background: blue;
}

.menu < ul
{
height:57px;
font-size:18px;
width:/*489px;*/620px;
margin-left:0px;
background: blue;
background-repeat: repeat-x;
float:right;
padding-right:20px;
}

.menu < ul {height:10px;
color:white;
font-size:16px;
margin-top:8px;
margin-right:2px;
padding-top:7px;
padding-bottom:19px;
font-family:Arial, Helvetica, sans-serif;
padding-right:7px;
padding-left:7px;
background:blue);
background-repeat:repeat-x;
/*background:orange;*/

}

.menu< ul a
{color:white;
text-decoration:none;
background:blue;
}

.menu ul li:hover
{
cursor:pointer;
-moz-box-shadow: inset 0 0 5px 5px #006699;
-webkit-box-shadow: inset 0 0 5px 5px #006699;
box-shadow: inset 0 0 5px 5px #006699;
}

.menu ul li ul
{visibility:hidden;
display:none;
}

.menu ul li:hover ul
{display:block;
list-style:none;
}

.menu li:hover ul li
{background:blue;
float:none;
position:absolute;
}

.menu li:hover ul li a
{color:white;
background:blue;
float:none;
position:absolute;
}

It doesn’t bump the other LIs away anymore. But I have a new problem. The background of the UL REFUSES to be blue, no matter where I add it. Also, the rollover STILL does not happen.

Help?

# April 4, 2013 at 12:15 pm

You have the arrows the wrong way round.

# April 4, 2013 at 12:50 pm

Also, you have closed the li before opening the ul under “services” so a lot of the selectors won’t work.

Here, I’ve tidied it up a bit for you: http://codepen.io/anon/pen/Kwiqb

# April 4, 2013 at 3:35 pm

LOL, how embarrassing! My gosh I’m sorry, that was pretty silly of me to put those backwards. Guess I still have a lot to learn.
Everything works now, thank you! You were very helpful, I appreciate your great effort in helping me out! :)

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

You must be logged in to reply to this topic.

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