Tabbed menu – flared edges and dropdown problems!

[plaedien]

Hello :)

I’m a bit of a newbie when it comes to this, and this is driving me crazy. I am trying to do a tabbed menu along these lines:

http://www.users.on.net/~plaedien/Screen%20shot%202011-08-30%20at%202.19.43%20PM.png

where the current page has the tab shown, but similar tabs appear on rollover for the other links. similar to this site (but obviously with the drop down element on certain links):

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml

I have seen a solution for this on this site, but unfortunately it would not work with my design, as it is not a single colour background. Ive also tried playing around with the old ‘sliding doors’ trick, but i just cannot get the menu to sit against the top with the images all nice and flush.

Is it possible to do the drop downs as illustrated in my first pic? or do i have to make them just a rectangle with round edges – without the bit cutting in near the normal tab area…

Help!

[thomas]

Here’s a fiddle for you. Be warned that you’re going to run into some problems if you need to support older versions of IE.

http://jsfiddle.net/wSdpm/2/

[plaedien]

Hi Thomas,

I havent had a decent look at this yet, but it looks great! Out of interest, which versions of IE would have problems?

I notice that you’ve used Javascript in this, my knowledge of java is minimal to say the least, what exactly is it doing? Im assuming it is for the dropdown part of the menu?

[Author]

Posts