Child-page dropdowns in wrong place

HTML & CSS
1

I’ve got my nav menu where I want it, but the dropdown pages are not appearing in the proper place. See http://upmichigan.biz and roll over the blue links.

This is my custom CSS for that menu:

#menu_container {overflow: hidden;
    margin-top: -3px;
}
.menu {float:left; left:50%; position:relative; width:auto;}
.menu li {float:left; position:relative; right:50%;}
.menu a {display: block; float: left;}

I’m using WordPress with the Thesis theme, so I’m not sure whether this issue is specific to that, but it seems like it’s probably just some CSS I’m missing. Any ideas?

2

I don’t like anything about that menu, but a quick-and-dirty fix is basically that your submenu (the .menu ul) isn’t pushed down.

You’ve got “left” stated several times in the CSS, but there’s no “top”, and you could add that to style.css when the parent li gets :hovered. Top should be something like the height of the menu, or close to it.

You might want to go looking for a theme that’s not so old. The code in there is dirty. <center> tags, arg!

This one is still fairly simple as far as theme elements, meaning you wouldn’t have to remove a whole lot to get the setup you’ve got now. Plus it’s got those added accessibility features which is nice. Even Yoopers need access. : )

If it doesn’t come with a good dropdown menu, the Sons of Suckerfish dropdowns at HTMLdog are nice and basic. If you put it inside the #container box then it would naturally be pretty close to centered. If it was still a bit too far to the left, you could give the menu a small left margin to bump it more center.

3

Thanks for your reply. Don’t blame Thesis for my dirty code :slight_smile: I put <center> in there myself because CSS and I don’t get along. Normally the dropdowns work fine - this is the first time I’ve tried to move the menu to a different place so I haven’t run into this particular problem before. I don’t think there’s any comparison between Thesis and Twenty Eleven - the problems are all operator error, believe me!

I added this:

.menu ul {position:relative;}

and it helped with the vertical placement, but now I see the child pages are not directly underneath their parent, and the width of the parent pages are weird. I’ll keep messing around, but if you feel like giving me another hint, I’m all ears. :slight_smile:

4

If I just wrote a menu for you would you be able to plug it into your current theme? (I’ve been wanting to try out deathshadow’s overflow-hidden menu for a while now anyway, maybe now is the time to try it)

The hidden-table thing was a CSS experiment by Stu Nichols. While interesting, the table code is kinda nasty. However to get IE6 to hover over those menu items otherwise requires some kind of Javascript. The easiest is a .htc file. You just grab the file and stuff it into the same folder as your CSS, and reference it in your CSS, and you’re good.

You also make your top-level links go somewhere (yours already do) and then also on those pages, offer the submenu links. So the History page has on it links to History Book and Cemetary.

5

Thank you for the offer - I’ve already put a call in to my WordPress/CSS guru and she has fixed it. Since time was tight on this one, I had to give in and put out the SOS. :slight_smile: Thanks, though!