Ønsker hjælp til tilpasning af menu
Jeg er ved at tilpasse denne menu:http://gosu.pl/demo/mygosumenu/menu.js
Nedenstående kode er hvad jeg arbejder med,
og for letheds skyld har jeg her indkluderet
stylesheet i koden. Bemærk at I lige skal hente
.js filen for at få det til at funke.
Den ville jeg ikke poste her af pladshensyn.
Det som jeg gerne vil, er at have en rød 1px streg
på alle "kasserne" i niveau 2 af menuen.
Som det er nu er inddelingen af menupunkterne 2 px
fordi border-bottom og top jo mødes.
Jeg tænkte på at inddele i box1, box2 og box3
sådan at jeg kunne udelade border-top i nogle af
menupunkterne, men så virker menuen ikke.
Nogen der kan hjælpe?
Lad mig vide om jeg har forklaret mig godt nok.
<html>
<head>
<style type="text/css">
<!--
#menu { background-color: #cd0303 }
#menu div.top {
padding-top: 5px;
padding-bottom: 6px;
padding-left: 6px;
padding-right: 8px;
width: 100%;
}
#menu div.section {
position: absolute;
display: inline;
z-index: -1;
}
#menu div.box { background-color: #fff; visibility: hidden; padding: 4px 6px 5px; position: relative; width: 100%; border: solid 1px #cd0303 }
a.menu { color: #fff; font-size: 11px; font-family: verdana; text-decoration: none; white-space: nowrap }
a.menu2 { color: #cd0303; font-size: 11px; font-family: verdana; text-decoration: none; white-space: nowrap }
a:hover.menu { color: #cece03; font-size: 11px; font-family: verdana; text-decoration: none; white-space: nowrap }
a:hover.menu2 { color: #cece03; font-size: 11px; font-family: verdana; text-decoration: none; white-space: nowrap }
-->
</style>
<script type="text/javascript" src="menu.js"></script>
</head>
<body onload="menuInit()">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="menu">
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<div class="top"><a class="menu" href="#">Home</a></div>
</td>
</tr>
<tr>
<td valign="top">
<div class="top"><a class="menu" href="#">Products</a></div>
</td>
<td valign="top">
<div class="section">
<div class="box"><a class="menu2" href="#">Products</a></div>
<div class="box"><a class="menu2" href="#">Community Suite</a></div>
<div class="box"><a class="menu2" href="#">Publishing Suite</a></div>
<div class="box"><a class="menu2" href="#">E-Commerce Suite</a></div>
<div class="box"><a class="menu2" href="#">Productivity Suite</a></div>
<div class="box"><a class="menu2" href="#">Marketing Suite</a></div>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div class="top"><a class="menu" href="#">Services</a></div>
</td>
<td valign="top">
<div class="section">
<div class="box"><a class="menu2" href="#">Services</a></div>
<div class="box"><a class="menu2" href="#">Web Development</a></div>
<div class="box"><a class="menu2" href="#">Web Components</a></div>
<div class="box"><a class="menu2" href="#">Technology Consulting</a></div>
<div class="box"><a class="menu2" href="#">Website Design</a></div>
<div class="box"><a class="menu2" href="#">Offshore Development</a></div>
<div class="box"><a class="menu2" href="#">Software Services</a></div>
</div>
</td>
</tr>
<tr>
<td valign="top">
<div class="top"><a class="menu" href="#">Process</a></div>
</td>
<td valign="top">
<div class="section">
<div class="box"><a class="menu2" href="#">Process</a></div>
<div class="box"><a class="menu2" href="#">Billing</a></div>
<div class="box"><a class="menu2" href="#">Branding</a></div>
<div class="box"><a class="menu2" href="#">Development</a></div>
<div class="box"><a class="menu2" href="#">Unified Process</a></div>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
