How to get transparent hexagon angle with last <li> only?

Question

I need to make such a menu. alt text http://shup.com/Shup/330421/1104422739-My-Desktop.png

• Elements of the drop-down list can be increased and decreased if the client will add or remove pages.
• the width of the drop-down list will depend on how many characters in the page title name.
• The corner is needed only in the last lower corner of the bottom element.

I know how to create a drop-down menu and how to ensure the transparency of the browser transfer, but I want to know how to give the necessary corner of the lower right corner while maintaining transparency.

Answer 1

Using jQuery corner demo :

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

Answer 2

you can change the opacity of elements using 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 with lists, you can apply a special class to the last li so that it looks different. this jquery string can help you

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

UPDATE

why don't you take alook on jQuery Corner Demo

Answer 3

Suckerfish . , , , <li> <ul>

Answer 4

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

: