View Full Version : Drop down menus and flared edges - CSS

11-10-2011, 12:27 AM
Hi all,

Ive been working on this menu for a little while now, and Ive made some progress that more or less works with my original vision:


I have a couple of questions though, as I cant figure out a way to implement some elements.
Here is the test site


1. So far Ive managed to do it all with background images and css, no JS in site (i would like to keep it that way if possible). I cant seem to get the top of the sub menu to marry up properly with the bottom of the tabs. Ive tried changing the sub-menu-top.png so it is thicker where it would join the tab, but this breaks if the tab is wider. Any suggestions on how to make this dynamic?

2. It seems to work fine in all browsers - except IE6 (big surprise). My knowledge of IE6 hacks is limited. Any suggestions? JS would be fine for this little problem if that works.

3. Finally - you will see on the mockup that the rollover on the submenus has a background colour that goes all the way to the edge of the submenu block. Ive tried to make this work, but the padding seems to break it. Any ideas how I could do this?

This has definitely been the most frustrating part of the site so far! but it seems almost there :) Just need help from some experts!


11-10-2011, 12:33 AM
1. Seems to work if you add a margin-top: -5px; to the .nav li .sub style rule.

Checking out the other points.

11-10-2011, 12:52 AM
thanks Teed, that seems to work. It looks like i might have to ignore the one rounded corner, but thats fine i think