How to give transparent hexagon angle at the last <li> only?

Question

I have to make menu like this.

• Items of drop-down can be increased and decreased If client will add or remove pages.
• width of drop-down's will depend on how many character in page title name.
• angle only needed at last item's right bottom corner.

I Know how to make drop-down menu and how to give cross browser transparency , but I want to know How to give needed angle to right bottom angle while keeping transparency.

Answer 1

you can change the opacity of the elements with CSS, this will work with all major browsers:

.transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

you need to do this using lists, you can apply a special class to the last li to make it look different. this jquery line might help you

$("#item3 li:last").addClass("special_corner");

UPDATE:

why dont you take alook at JQuery Corner Demo

Answer 2

Check out Son of Suckerfish drop down menus. The special styling you want would require a class to be assigned to the last <li> in any <ul>

Answer 3

Using HTML 5

<nav>
<ul>
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a>
    <ul>
    <li>Item 3.1</li>
    <li>Item 3.2</li>
    <li>Item 3.3</li>
    <li>Item 3.4</li>
    </ul>
</li>
<li>etc......
</ul>
</nav>

css

border-bottom-right-image:

Answer 4

Using the jQuery corner demo:

$("#item3 li:last").corner("br bevel");