Menu help.

Hi I was wondering if anyone could help me with this widget problem I have?
I want to make a menu widget like on this academy ---> http://heavensduelacademy.forumotion.com/
I was wondering if anyone new how? I know to create a new widget I just don't know what code to use.
Any help?

Kthanksbi.

HTML code. Writte what you want, and I will writte that code for you.

Hi,

Moved to Scripts & Coding problems.

Insert this code into your module (widget):

Code:

<style type="text/css">

.arrowgreen{
   width: 100%; /*width of menu*/
   border-style: solid solid solid solid;
   border-color: #141414;
   border-size: 1px;
   border-width: 1px;
}

.arrowgreen ul{
   list-style-type: none;
   margin: 0;
   padding: 0;
}
  
.arrowgreen li a{
   font: bold 9px Verdana, Arial, Helvetica, sans-serif;
   display: block;
   background: transparent url(http://i42.servimg.com/u/f42/17/32/93/44/menu3114.png) 100% 0;
  height: 28px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
   padding: 4px 0 4px 10px;
   line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
   text-decoration: none !important;
}  
  
.arrowgreen li a:link, .arrowgreen li a:visited {
   color: #A1A1A1;
text-decoration:none !important;
}

.arrowgreen li a:hover{
   color: #AE4CFF;
   background-position: 100% -32px;
text-decoration:none !important;
}

  
.arrowgreen li a.selected{
   color: #26370A;
   background-position: 100% -64px;
}

</style>
<script type="text/javascript">
<!--
function popup(url)
{
 var width  = 500;
 var height = 600;
 var left  = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';
 newwin=window.open(url,'windowname5', params);
 if (window.focus) {newwin.focus()}
 return false;
}
// -->
</script><div class="arrowgreen">
   <ul>
                <li><a href="URL_here">Title Here</a></li>
<li><a href="URL_here">Title Here</a></li>
     <li><a href="URL_here">Title Here</a></li>
<li><a href="URL_here">Title Here</a></li>
<li><a href="URL_here">Title Here</a></li>
<li><a href="URL_here">Title Here</a></li>
<li><a href="URL_here">Title Here</a></li>
<li>
   </li></ul>
</div>
<span class="corners-bottom"><span></span></span></div>

Replace your titles with "Title Here" & replace the URL's with "URL_here." That'll be it. You can also change the colors of font, etc.. If you need help doing so, I'll be here.

Thank you, this helped me a lot.