css menu HJÆLP

Hey

har fået sat denne menu sammen af mange forskellig koder.. men nu mangler jeg bare at få den vendt.. Lige nu når man trykker på Menu kommer menuen under knapper - vil gerne have at menu går opad i stedt for.

En anden ting er at jeg rigtig godt kunne tænke mig at få et billede som knap og at man kan se at man trykker på knappen når det.. hvordan skal jeg lige gøre det??

Min kode

css -->

#menu{
    float: left;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 12em;
    float: left;
}

#menu a, #menu p {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
}
   
#menu h2 {
    color: #fff;
    background: #000;
    text-transform: uppercase;
}   
   
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {
    display: none;
}

div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {
    display: block;
}

Html/javascript -->

//Menu script
function showlayer(layer){
    var myLayer=document.getElementById(layer);
    if(myLayer.style.display=="none" || myLayer.style.display==""){
        myLayer.style.display="block";
    } else {
        myLayer.style.display="none";
        }
}


<div id="menu">

<ul>
  <li><p onclick="java script:showlayer('sm_1')">Menu</p>
    <ul id="sm_1">
      <li><a href=""" title="1">test</a></li>
      <li><a href="#">test</a>
        <ul>
          <li><a href="#">test</a>       
            <ul>
              <li><a href="#" title="test">Stage 1</a></li>
              <li><a href="test" title="test">Stage 2</a></li>           
              <li><a href="test" title="test">Stage 3</a></li>
              <li><a href="test" title="test">Stage 4</a></li>
              <li><a href="test" title="test">Stage 5</a></li>           
              <li><a href="test" title="test">Stage 6</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>                           
</div>