WP Dropdown Menu?

[Tittytweaker]

Hey guys.

I'm looking for a way to add a drop down menu to my wordpress site. I thought the way to do this was by simply putting the different categories under one parent category. I was pretty sure that's how it worked with the default theme, but apparently my theme isn't made to do that, or I'm doing it wrong.

Can anyone shed some light on this?

[defunk]

I think you can only do it if you have your cats in a wigit - it gives you the option of

"Display as dropdown"

[Tittytweaker]

Did a little searching, and it appears that my theme does have some CSS for a dropdown menu.

.navigation { height: 38px; margin: 14px auto 0 auto; background: url(images/menu-bg.png) repeat-x left top; }
.navigation ul li { height: 37px; margin: 1px 0 0 0; padding: 0 21px 0 20px; line-height: 37px; font-family: bebas-neue; font-weight: normal; font-size: 22px; float: left; background: url(images/menu-delimiter.png) no-repeat right top; }
.navigation ul li a { text-decoration: none; }
.navigation ul li a:hover { color: #fb479c; }

/* Some code from this tutorial http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html */

.navigation ul.menu li { position: relative; }
.navigation ul.menu li span { color: #fb479c; }
.navigation ul.menu li span.subhover { cursor: pointer; }
.navigation ul.menu li ul.sub-menu { position: absolute; left: -1px; top: 37px; display: none; padding: 0; margin: 0; }
.navigation ul.menu li ul.sub-menu li { width: 184px; height: 27px; line-height: 27px; text-indent: 14px; font-size: 12px; font-weight: normal; background: url(images/left-menu-bg.png) no-repeat left top; text-align: left; padding: 0; margin: 0; }

/* End of code from tutorial */

It appears on the menu section you can just drag and drop menu items underneath one another. So mission accomplished as far as that goes. However, I have to hover the mouse over the text in order to be able to click it. What do I have to change so that I only have to hover the mouse over the "box" to activate the rollover color and click it? Much more convenient that way since you don't have to be so precise with the mouse.

[JanuaryJones]

At about line 39 of your stylesheet you will see this:
.navigation ul li a {
text-decoration: none;
}

Add this: display:block; so now you have this:
.navigation ul li a {
text-decoration: none;
display: block;
}

Now you can hover anywhere over the "block" or box that contains the link.

[Tittytweaker]

Awesome, thank you, that did the trick!