Dropdown Newbie: MY DROPDOWN WON’T WORK

[Gingerbread]

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:

• Home
• About Us
• Services

• Pool Cleaning
• Pool Renovation
• Our Equipment

[Paulie_D]

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/

[Gingerbread]

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?

[Paulie_D]

You have the arrows the wrong way round.

[Paulie_D]

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

[Gingerbread]

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! :)

[Author]

Posts