vertical dropdown menu
Er der nogen der kan hjælpe mig med den her dropdown menu.Mit problem er at den benytter sig af <UL> og <LI>, hvilket konflikter med andre elementer på siden der også benytter <UL> og <li> (hvor det er meningen at de skal bruge standard liste funktionen, altså en bulletlist).
Så hvis der er nogen der kan komme med en løsning til hvordan jeg kommer uden om at skulle bruge <UL> og <LI> i denne menu (erstatte disse med andre tags?) er der points.
"koden":
_________________________________________________________________
<html>
<head>
<style>
LI
{
DISPLAY: block;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: #000000;
MARGIN-BOTTOM: 0px;
MARGIN-RIGHT: 0px;
MARGIN-TOP: 0px;
FONT-FAMILY: Verdana, Arial, Sans-Serif;
FLOAT: left;
WIDTH: 100%;
}
UL
{
border: #DDD9A7 1px solid;/*sætter border på drop-ud menuen*/
padding: 0px 0px 0px 0px;
MARGIN-TOP: 0px;
MARGIN-BOTTOM: 0px;
MARGIN-RIGHT: 0px;
COLOR: #000000;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
FONT-FAMILY: Verdana, Arial, Sans-Serif;
DISPLAY: block;
WIDTH: 220px; /*bredden på drop-ud menuen*/
}
.invisible
{
MARGIN-TOP: -15px; /*rykker drop-ud menuen op eller ned, jo større plus ned, jo større minus op*/
MARGIN-LEFT: 130px;/*rykker drop-ud menuen ud til højre*/
POSITION: absolute;
DISPLAY: none;
}
LI A
{
padding: 2px 2px 2px 2px;
FONT-FAMILY: Verdana, Arial, Sans-Serif;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
WIDTH: 100%;
COLOR: #000000;
TEXT-DECORATION: none;
}
.submenu
{
PADDING-RIGHT: 5px;
PADDING-LEFT: 20px;/*rykker teksten i drop-ud menuen til højre*/
PADDING-BOTTOM: 2px;
PADDING-TOP: 10px;/*afstanden mellem top og punkter samt mellem menu punkterne, kan også bruge line-height*/
TEXT-DECORATION: none;
text-align: left;
FONT-FAMILY: Verdana, Arial, Sans-Serif;
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
COLOR: #000000;
WIDTH: 100%;
BACKGROUND-COLOR: #F4F2E6; /*baggrundsfarven på den uddroppede menu*/
/*Gør dropout menuen gennemsigtig*/
position: relative;
z-index:1000;
filter: alpha(opacity=90);
/*Gør dropout menuen gennemsigtig slut*/
}
LI A:hover
{
COLOR: #000000;
}
A.hassubmenu
{
BACKGROUND-POSITION: 128px 7px;
}
.menuclass
{
border: 0px 0px 0px 0px;
FLOAT: right;
MARGIN: 1px 1px 100%;
}
</style>
</head>
<body>
<table cellSpacing="0" cellPadding="0" width=190 border=0>
<tr>
<td align="left" valign="top">
<UL class="<%=menuclass %>">
<asp:repeater id="Repeater1" runat="server">
<ItemTemplate>
<li>
<button class=button><asp:HyperLink NavigateUrl="<%# GetChannelStartPageUrl(((Channel)(Container.DataItem))) %>" CommandArgument="<%# ((ChannelItem)(Container.DataItem)).Name %>" OnClick="SubMenuLink_OnClick" onmouseover="showSubMenu()" Runat=server ID="Hyperlink2">
<%# ((Channel)(Container.DataItem)).DisplayName %></asp:HyperLink></button>
<br>
<img class=usynligt height=2px>
<UL class="invisible">
<asp:Repeater id="Repeater2" DataSource="<%# ((Channel)(Container.DataItem)).Channels %>" runat="server">
<ItemTemplate>
<li>
<a href="<%# GetChannelStartPageUrl(((Channel)(Container.DataItem))) %>" Class='submenu' Runat=server ID="Hyperlink4">
<%# ((Channel)(Container.DataItem)).DisplayName %>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
</UL>
</li>
</ItemTemplate>
</asp:repeater>
</UL>
</td>
</tr>
</table>
<script language="javascript">
function showSubMenu()
{
var objThis = this;
for(var i = 0; i < objThis.childNodes.length; i++)
{
if(objThis.childNodes.item(i).nodeName == "UL")
{
objThis.childNodes.item(i).style.display = "block";
}
}
}
function hideSubMenu()
{
var objThis = this;
for(var i = 0; i < objThis.childNodes.length; i++)
{
if(objThis.childNodes.item(i).nodeName == "UL")
{
objThis.childNodes.item(i).style.display = "none";
return;
}
}
}
function initialiseMenu()
{
var objLICollection = document.body.getElementsByTagName("LI");
for(var i = 0; i < objLICollection.length; i++)
{
var objLI = objLICollection[i];
for(var j = 0; j < objLI.childNodes.length; j++)
{
if(objLI.childNodes.item(j).nodeName == "UL")
{
objLI.onmouseover=showSubMenu;
objLI.onmouseout=hideSubMenu;
for(var j = 0; j < objLI.childNodes.length; j++)
{
if(objLI.childNodes.item(j).nodeName == "A")
{
objLI.childNodes.item(j).className = "hassubmenu";
}
}
}
}
}
}
</script>
</body>
</html>
_________________________________________________________________
