Well, I fixed one part of it, I made copy go down to the next line of the menu, Im still trying to figure out why the menu changes size when you rollover the links, fortunately after you roll over them once, the problem goes away.
<style>
a{text-decoration:none}
.menuLayer{
color:brown; border:2px solid;
background-color: orange;
border-color:gold darkorange darkorange gold;
position:absolute;
}
.menuItemout{
color:brown;
padding:5px 7px 5px 7px;
margin:5px 7px 5px 7px;
font-family:verdana;
font-size:12;
cursor:default;
margin: 1px;
}
.menuItemactive{
color:brown;
border:1px solid;
border-color:darkorange gold gold darkorange;
padding:5px 7px 5px 7px;
margin:5px 7px 5px 7px;
font-family:verdana;
font-size:12;
cursor:default;
background-color:darkorange;
margin: 1px;
}
.menuItemhover{
color:brown;
border:1px solid;
border-color:gold darkorange darkorange gold;
padding:5px 7px 5px 7px;
margin:5px 7px 5px 7px;
font-family:verdana;
font-size:12;
cursor:default;
margin: 1px;
}
.menuchilditemout{
color:brown;
background-color:transparent;
font-family:verdana;
font-size:12;
cursor:default;
padding: 3px 1em;
display:block;
}
.menuchilditemhover{
color:brown;
background-color:darkorange;
font-family:verdana;
font-size:12;
cursor:default;
padding: 3px 1em;
display:block;
}
.menusep{
border:1px solid;
border-color:darkorange gold gold darkorange;
font-size:1;
height:1;
width:100%;
position:relative;
}
</style>
<script>
var activeButton = null;
//document.onmousedown=pageMouseDown(event);
function pageMouseDown(event){
if(activeButton==null){
var el=document.getElementsByTagName('A');
for(var i=0;i<el.length;i++){
el[i].className="menuItemout";
}
}
else{
var el2=document.getElementsByTagName('DIV');
for(var j=0;j<el2.length;j++){
if(el2[j].className=="menuLayer" && el2[j].id!="menubar")
el2[j].style.visibility="hidden";}
var el3=document.getElementsByTagName('A');
for(var k=0;k<el3.length;k++){
if(el3[k].className.substring(0,8)=="menuItem")
el3[k].className="menuItemout";}
}
activeButton=null;
}
function replaceClassName(el,name){
var button=document.getElementById(el);
el.className=name;
}
function resetButton(button){
button.menu.style.visibility="hidden";
button.className="menuItemout";
activeButton = null;
}
function buttonClick(menuId){
var button=event.srcElement;
button.blur();
if (button.menu==null){button.menu=document.getElementById(menuId);}
if (activeButton==null){
depressButton(button);
activeButton=button;
}
else if (activeButton != null && activeButton!=button){
resetButton(activeButton);
depressButton(button);
activeButton=button;
}
else if(activeButton!=null && activeButton==button){
resetButton(activeButton);
activeButton=null;
replaceClassName(button,'menuItemhover');
}
else{
activeButton=null;
return false;
}
}
function depressButton(button){
var x,y;
x = getPageOffsetLeft(button);
y = getPageOffsetTop(button) + button.offsetHeight;
x += button.offsetParent.clientLeft;
y += button.offsetParent.clientTop;
button.menu.style.top=y;
button.menu.style.left=x;
button.className="menuItemactive";
button.menu.style.visibility="visible";
}
function buttonOver(menuId){
var button=event.srcElement;
if(activeButton!=null && activeButton==button){
null;
}
else if(activeButton==null){
var el=document.getElementsByTagName('A');
for(var i=0;i<el.length;i++){
el[i].className="menuItemout";
button.className="menuItemhover";
}
}
else{
buttonClick(menuId);
}
}
function buttonOut(menuId){
var button=event.srcElement;
if(activeButton==null)
button.className="menuItemout";
}
function getPageOffsetLeft(el) {
var x;
x = el.offsetLeft;
if (el.offsetParent != null)
x += getPageOffsetLeft(el.offsetParent);
return x;
}
function getPageOffsetTop(el) {
var y;
y = el.offsetTop;
if (el.offsetParent != null)
y += getPageOffsetTop(el.offsetParent);
return y;
}
</script>
<body>
<div id="menubar" class="menuLayer" style="width:100%;position:absolute; top:0;left:5;height:28">
<a id="menubtnedit" href="#" class="menuItemout"
onclick="buttonClick('menuedit')"
onmouseover="buttonOver('menuedit')"
onmouseout="buttonOut('menuedit')"
>Edit</a>
</div>
<div id="menuedit" class="menuLayer" style="width:18%;visibility:hidden">
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'">Script...</a>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'"style="display:block">Style Sheet...</a>
<div class="menusep"> </div>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'">Select All</a>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'"style="display:block">Copy</a>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'"style="display:block">Paste</a>
<div class="menusep"> </div>
<a href="#" class="menuchilditemout"
onmouseover="this.className='menuchilditemhover'"
onmouseout="this.className='menuchilditemout'">Preferences</a>
</div>
</body>