Menu a freccia

[robertova]

Salve a tutti, sono nuovo di questo forum. Ho girato invano per molto tempo per cercare di fare quello che sto per chiedere a voi.
Vorrei creare un menu come questo, ma alla fine del rettangolo vorrei unirci una vera e propria freccia.
Penso si debba lavorare con il CSS, ma non sono un professionista.. Grazie in anticipo!


HTML:

            <div id="menu">
                <ul>
                    <li><a class="corrente" href="index.html">Home Page</a></li>
                    <li><a href="appunti.html">Appunti</a>
                    <ul>
                        <li><a href="lezione1.html">Lezione I</a></li>
                    </ul>
                    </li>
                    <li><a href="video.html">Video Lezione</a></li>
                    <li><a href="chisiamo.html">Chi siamo</a></li>
                    <li><a href="contatti.html">Contatti</a></li>
                </ul>      
            </div>

CSS:

#menu {
clear:left;
float:left;
width:400px; /* distanza menu-testo */
margin:0 0 10px 0;
padding:0;
}


#menu ul {
list-style:none;
width:400px; /* larghezza menu */
margin:0 0 20px 0;
padding:0;
}


#menu li {
margin-bottom:5px;
}


#menu li a {
font-weight:bold;
height:30px; /* altezza menu */
text-decoration:none;
color:#505050;
display:block;
padding:6px 0 0 10px;
background:#f4f4f4 url(img/menubg.gif) bottom left repeat-x;
border-top:1px solid #1E90FF;
border-right:1px solid #1E90FF;
border-bottom:1px solid #1E90FF;
border-left:4px solid #1E90FF;
line-height:25px;
}


#menu ul li ul {
margin:5px 0 5px 15px;
font-size:0.9em;
display:none;
width:170px;
}


#menu ul li:hover ul{
display: block;
z-index:1;
padding: 0;
width:370px; /* larghezza mini menu */
color:#505050;
font-size:0.9em;
}


#menu li a:hover, #menu li a.corrente {
background:#eaeaea url(img/menubg2.gif) bottom left repeat-x;
color:#505050;
border-top:1px solid #1E90FF;
border-right:1px solid #1E90FF;
border-bottom:1px solid #1E90FF;
border-left:4px solid #0000FF;
}


#menu ul ul a {
height:30px; /* altezza mini menu */
margin:0;
padding:4px 0 0 8px;
}




#contenuto {
margin:25px 30px 50px 220px;
padding:0;
line-height:1.5em;
}


#footer {
clear:both;
margin:0 auto;
padding:8px 0;
border-top:2px solid #dadada;
width:800px;
text-align:center;
color:#808080;
background-color:#ffffff;
font-size:0.9em;
}


#footer a {
color:#808080;
background-color:inherit;
text-decoration:none;
}


#footer a:hover {
text-decoration:underline;
}