Looks like this is the topic of the last few days!

I've successfully implemented a CSS drop in WordPress, but am having issues with styling. I can't pinpoint what I'm doing wrong and would appreciate a bit of help. Drops were never my thing, but I need them with this particular layout.

Theme can be seen here.

I've been farting around with this for the last day or two and think I'm officially stuck. Currently the drop is only permitting 2 levels to be shown vertically (and we have some oddball spacing issues there). Then the secondary level of a drop has a different font size (I want it to be smaller like the first level).

Thoughts?

Things kind of slow around here?

LOL.. for me.. it's been insanely busy with little time to do much else - even at home! I can't even get to that site from work - it's blocked by our IT.

Just checking to see where you are with this. When I visit the page and mouse over Welcome I do see a dropdown that looks fine. When I mouse over Drop Sample 3 I see another level way off to the right, which I assume you want to appear just to the right of Drop Sample 3.

Is that where you're stuck? Seems a little different than what you were originally describing so I wanted to ask before trying to jump in and help solve the problem.

Yeah, I fixed two of the problems on my own. For some reason drop three doesn't work right. I'm starting to wonder if this particular drop I used for this theme just isn't setup for three tiers.

Glad you got at least the other 2 problems solved. You should be able to take the drop down 3 levels deep though. Is the problem in the css or is the problem that the html isn't producing the extra level of html?

I have no idea.

<div id="menu">
    
        <ul id="dropmenu">
        <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
        </ul>
    
    </div>

<?php wp_enqueue_script('jquery'); ?>

<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix
jQuery("#dropmenu li").hover(function(){
        jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);
        },function(){
        jQuery(this).find('ul:first').css({visibility: "hidden"});
        });
});
</script>

The WordPress code should be displaying all levels of navigation so I'll assume the html is being produced. I think the jQuery should be working too. Hmm?

You got me...That's why I'm here.

It looks like you changed the menu again. Before I was seeing another level of submenu under Drop Menu 3. The only issue I was seeing was that the submenu was appearing too far to the right.

Now I only see the one level of drop downs. Did you decide that was as deep as the main navigation will go? Or are you still working on getting the next level to show?

Actually, that's my theme testing subdomain and what you're seeing at the moment is a theme for a client which doesn't require a 3rd tier.

To answer the question though, no I never got this issue worked out. The website the theme I was working on is http://triplemoonsexotic.com and I disabled the third tier until I can get it worked out. I imagine it's some crazy nested ul or li css thing.

If you want to give another system a try I always recommend the suckerfish drop down.

Click the sons of suckerfish link, but feel free to read what's behind the other links.

The system is relatively easy to use. It's mostly css with a small bit of javascript thrown in for IE. You don't have to do anything with javascript other than to make sure to include it. The javascript just dynamically adds and removes a class from the menu items to mimic the behavior of css :hover.

When you're working on the menu you'll work exclusively with the css.

It's a nice system and it works.