How could I achieve the same navigation using CSS3? (currently flash AS3)

Tags: flash,drupal,css3,navigation

Problem :

Link to my actual flash demo:

I created this navigation using Adobe Flash (AS3 script) which works quite well. The problem is that I'm using Drupal for my website's CMS. Trying to implement this flash navigation using Drupal would be a big chore in itself right there. But even then, it would be hard for it to be flexible enough so that I could change the links as needed through Drupal's Primary Links.

One of the last flaws with using a flash-based navigation (even assuming I could get it to work) is that spiders and bots may not index the site correctly if my code uses a great deal of hacks in order to visually have it working.

Now, I can do my own research and coding with CSS as I am very firmilliar with CSS 2.1 and learning basic CSS3 currently. One of the problems I see though is the effect I'm using on mouse hover. I can't see how I could get the metal tab to drop down upon mouse over, and also have the light above it fade in at the same time. The reason why I see this is a problem is because the clickable (or 'hover area') area on the light isn't directly on top of the actual image, but rather below by quite a few pixels.

If you could at least point me in the right direction, that would be great. Thank you!

Solution :

It certainly is possible to replicate it, but not without some trickery.

You can see a working example here:

The essence to solving the problem is realizing that the :hover events will be triggered even if the parent container is smaller than its child. Visually, it seems that the line and the tab are separate elements, but in code they are the typical li > a.

    CSS Howto..

    How to write two CSS files: with and without sourcemap

    How to apply styles to neighboring elements in a list

    How to make html to fill full screen height on webview in android browser

    How to add space between CSS table rows?

    How to reset inline css applied by jquery?

    Need to show submenu to the right of it's parent item

    How to use Resource bundle(Client Bundle) in JSNI?

    How to display block from left to right in css

    How to change font color inside nav element?

    How to Create Grid/Tile View with CSS?

    How to build those rectangular with picture and text css bootsrap? [closed]

    How to make css background-blend-mode work with gradients?

    How do I divide all margins but last to even out space?

    How To Display only First Word of H2 Heading With JavaScript or CSS

    How to put six divs in two rows

    How to fade-in and fade-out background-image with CSS transition?

    How to add circle shape to CSS button

    How to make CSS (or JS?) hideable help bar

    How to store a global variable in JQuery?

    How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of the half hexagon

    JQuery - show/hide rows and manipulate css

    How to get rid of excess blank space in CSS slideshow without getting rid of manual button transition?

    How to center a block of social icon background images?

    PHP imagecopyresampled + how to get the best results

    How to use a Drive hosted css to customize the receiver?

    How to change just the css inside a DIV and not anywhere else?

    How to add decoration to link in CSS?

    How to change color in first td in my table using class

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How to specify background image height in div Container