border omkring submenu
Jeg vil gerne have en box rundt om undermenuen i denne menu:<HTML>
<HEAD>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
<STYLE TYPE="text/css">
td {
display:block;
vertical-align: top;
}
.menuPunkt, .menuPunkt a{
text-decoration: none;
font-family: verdana,arial,sans-serif ;
color: black ;
font-size: 16px ;
font-weight: normal ;
cursor:hand;
}
.menuText, .menuText a{
background-color: white;
text-decoration: none;
font-family: verdana,arial,sans-serif ;
color: black ;
font-size: 9px ;
font-weight: normal ;
cursor:hand;
.border, .border a{
border: 1px solid #99CCCC;
}
</STYLE>
<style><!--
A:link {text-decoration: none; color: #000000;}
A:active {text-decoration: none; color: #000000;}
A:visited {text-decoration: none; color: #000000;}
A:hover {text-decoration: none; color: #99CCCC;}
--></style>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
function trim(txt){
return txt.replace(/^\s*(.*?)\s*$/, "$1");
}
function getI(object,elementId){
return object.getElementById(elementId)
}
function getTs(object,tagName){
return object.getElementsByTagName(tagName)
}
</SCRIPT>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
function posMenu(){
refElm = document.getElementById('minRefImg');
for(var zx=zy=0;refElm!=null;zx+=refElm.offsetLeft,zy+=refElm.offsetTop,refElm=refElm.offsetParent);
divMenu = document.getElementById('menu');
divMenu.style.left=zx;
divMenu.style.top=zy;
posText(zx,zy);
}
var men = 6;// Number of active menus
function posText(x,y){
for(i=1;i<=men;i++){
punkt=document.getElementById('menupunkt'+i);
for(var zx=zy=0;punkt!=null;zx+=punkt.offsetLeft,zy+=punkt.offsetTop,punkt=punkt.offsetParent);
obj=document.getElementById('menutext'+i);
obj.style.left=zx-x+115;
obj.style.top=zy-y+5;
}
}
function showFrame(frm){
par=getI(top.document,frm).parentNode;
frms=getTs(par,"IFRAME");
for (i=0;i<frms.length;i++){
if (frms[i].id==frm){
frms[i].style.display="block"
}else{
frms[i].style.display="none"
}
}
}
function showMenu(nr){
obj=document.getElementById('menutext'+nr);
obj.style.display="block";
}
function hideMenu(nr){
document.getElementById('menutext'+nr).style.display='none';
}
</SCRIPT>
</HEAD>
<BODY STYLE="width:100%;height:100%;vertical-align:middle;" onload="posMenu()" onresize="posMenu()">
<TABLE COLS="3" BORDER="0" STYLE="width:150px;height:200px">
<TR STYLE="height:80%">
<TD STYLE="width:10%;height:80%"> </TD>
<TD STYLE="width:80%;height:80%;border:1px solid 1px solid #99CCCC;"><IMG ID="minRefImg" SRC="transparent.gif" HEIGHT="1" WIDTH="1"></IMG> </TD>
<TD STYLE="width:10%;height:80%"> </TD>
</TR>
<TR STYLE="height:10%"><TD COLSPAN="3"> </TD></TR>
</TABLE>
<div ID="menu" STYLE="position:absolute;top:0;left:0;display:block;overflow:no">
<TABLE ONMOUSEOVER="showMenu(1);" ONMOUSEOUT="hideMenu(1);"><TR><TD>
<DIV ID="menupunkt1" CLASS="menuPunkt" STYLE="display:block"><A HREF="java script:showFrame('Init');">Products </A>
<DIV ID="menutext1" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"> <a href="produktgr1.htm" target="indhold">produktgr1</a> <BR>
produktgr2 <BR> produktgr3 <BR> produktgr4<BR> produktgr5 <BR> produktgr6 <BR> produktgr7 <BR></DIV></DIV>
</TD></TR></TABLE>
<TABLE ONMOUSEOVER="showMenu(2);" ONMOUSEOUT="hideMenu(6);"><TR><TD>
<DIV ID="menupunkt5" CLASS="menuPunkt" STYLE="display:block">
Process
</DIV>
<TABLE ONMOUSEOVER="showMenu(3);" ONMOUSEOUT="hideMenu(3);"><TR><TD>
<DIV ID="menupunkt3" CLASS="menuPunkt" STYLE="display:block">Clients
<DIV ID="menutext3" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"> menutext3 <BR> menutext3 <BR> menutext3 <BR></DIV></DIV>
</TD></TR></TABLE>
<TABLE ONMOUSEOVER="showMenu(4);" ONMOUSEOUT="hideMenu(4);"><TR><TD>
<DIV ID="menupunkt4" CLASS="menuPunkt" STYLE="display:block">Contact
<DIV ID="menutext4" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"> menutext4 <BR> menutext4 <BR> menutext4 <BR></DIV></DIV>
</TD></TR></TABLE>
<TABLE ONMOUSEOVER="showMenu(5);" ONMOUSEOUT="hideMenu(5);"><TR><TD>
<DIV ID="menupunkt5" CLASS="menuPunkt" STYLE="display:block">Background
<DIV ID="menutext5" CLASS="menuText" STYLE="display:none;z-index:2;position:absolute;"> menutext5 <BR> menutext5 <BR> menutext5 <BR></DIV></DIV>
</TD></TR></TABLE>
<TABLE ONMOUSEOVER="showMenu(6);" ONMOUSEOUT="hideMenu(6);"><TR><TD>
<DIV ID="menupunkt5" CLASS="menuPunkt" STYLE="display:block"><a href="indhold.htm" target="indhold">Home</a>
</DIV>
</TD></TR></TABLE>
</div>
</BODY>
</HTML>
Men hvis jeg sætter .border ind i stylesheet'et, kommer der små bokse rundt om hvert enkelt menupunkt, ligesåsnart jeg sætter links på dem. Er der nogen, der har en anden løsning?
Ved samme lejlighed kunne man måske få ryttet ud i alle erne.
