Navigation - image on a: fly over and a: selected

advertisements

I'm trying to add a "folder" (don't know what to call it) behind the items I hover on in my navigation menu and also stays there on the selected page. You can see the image here:

But since this is a one size image, it's to big for some of my items.

How do I make this work the best possible way? Should I use som jQuery or just stick to CSS?

You can see what I've done so far on: "deleted my link, after the solution was found"

Hope you can give me some helpful answers. :)


  • Change the background-image to reflect only the orange gradient (without the curves at the top corners).

  • Use CSS border-radius for the rounded corners at the bottom.

  • Cut the top corners curve to a seperate image and use CSS' :before and :after to place the image in the left and right corners accordingly.

Something like:

#nav a:hover
    {
    background-image: url('orange_gradient.png'); /* could be 1px wide */
    background-repeat: repeat;
    border-radius: 0 0 10px 10px;
    }

#nav a:hover:before
    {
    content: url('curve.png');
    display: inline-block;
    position: absolute;
    left: 0;
    margin-top: -50px;
    }

#nav a:hover:after
    {
    content: url('curve.png');
    display: inline-block;
    position: absolute;
    right: 0;
    margin-top: -50px;
    }