smallcompany - 12:36 am on May 25, 2012 (gmt 0)

I have something that keeps it in vertical order. Here is the code (Copyright Stu Nicholls):

.stretchHolder {width:100px;height:20px;margin:10px 0px 10px;position:relative;z-index:100;/*box-shadow:0 2px 2px rgba(0,0,0,0.8);*/font-family:arial, sans-serif;}
.stretchMenu {position:absolute;width:670px;overflow:hidden;}
.stretchDrop {padding:0;margin:0;list-style:none;width:670px;position:relative;}
.stretchDrop > li.slide {float:left; width:100px;-moz-transition: 0.25s 0.25s;-ms-transition: 0.25s;-o-transition: 0.25s;-webkit-transition: 0.25s;transition: 0.25s;}
.stretchDrop > li > a {display:block; /*font-weight:bold;*/ line-height:20px; padding-left:10px; color:#FFFFFF; text-decoration:none; font-size:75%; text-shadow: 0 1px 1px #000000; /*border-left:1px solid #fff;*/}
.stretchDrop > li.slide > a {border-right:1px solid #D6D6D6;}
.stretchDrop > li.p1 > a {background:#333333;}
.stretchDrop > li.p1 > a {
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, rgba(255, 255, 255, 0.7)), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.3)));
background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:-o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);
background-image:linear-gradient(top, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0.2) 50%, transparent 50%, rgba(255, 255, 255, 0.3) 100%);}
.stretchDrop > li > div {height:0;width:663px;overflow:hidden;position:relative;border-radius:0 0 10px 10px;margin-left:1px;padding-left: 5px;
-moz-transition: height 0.25s;
-ms-transition: height 0.25s;
-o-transition: height 0.25s;
-webkit-transition: height 0.25s;
transition: height 0.25s;
}
.stretchDrop > li.p1 > div {background:#333333;}
.stretchDrop > li.p1 > div {
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
background-image: linear-gradient(90deg, rgba(255, 255, 255,0.3), rgba(255, 255, 255,0));
}
.stretchDrop:hover {direction:ltr;}
.stretchDrop:hover > li.slide {width:70px;
-moz-transition: 0.25s 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.stretchDrop:hover > li.slide:hover {width:670px;
-moz-transition: 0.25s 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.stretchDrop:hover > li:hover > div {height:80px;
-moz-transition: 0.25s 0.5s;
-ms-transition: 0.25s 1s;
-o-transition: 0.25s 1s;
-webkit-transition: 0.25s 1s;
transition: 0.25s 1s;
}
.stretchDrop > li > div b {display:block; width:670px; height:30px; background:#888; margin-top:-50px; box-shadow:0 2px 5px rgba(0,0,0,0.8);}
.stretchDrop > li > div dl {width:108px;float:left;padding:5px 0px;margin:6px 0px;font-weight:bold;}
.stretchDrop > li > div dl dt {padding-left:10px; margin-bottom:5px; font-size:70%; line-height:25px; border-bottom:1px dotted #000; text-shadow: 0 1px 1px #fff;}
.stretchDrop > li.p1 > div dl dt {color:#036;}
.stretchDrop > li > div dl dd {padding:0; margin:0;}
.stretchDrop > li > div dl dd a {display:block; color:#FFFFFF; font-size:70%; line-height:20px; text-decoration:none; padding-left:10px;}
.stretchDrop > li > div dl dd a:hover {color:#000000;background:#FFCC00;border-radius:5px;}
#info .stretchDrop > li > div p {width:404px; height:30px; background:#eee; position:absolute; bottom:5px; left:12px; padding:0 20px; line-height:30px; font-size:10px; margin:0; border-radius:30px;}
.around {margin: 0px auto;width:120px;}

The menu flies out to the right and then down. Now, is it possible to change the direction so it:

- flies out from left to right and then down (from the top right of the site)
- flies out down, centered to the initial button (from the top center of the site)

As it is now, the only natural position that can be used is top left corner of the site.

Thanks