drop down menu der skal repetere verticalt istedet for horisontal
Jeg har følgende dropdown menu, der repeterer horisontalt. Jeg vil gerne have den til at repeterer verticalt.Jeg er ikke interesseret i nogen ny, da denne umiddelbart gør de ting jeg gerne vil have den til - den er bare den forkerte vej.
"Kode":
_________________________________________________________________
<STYLE id="default" type="text/css">
.disabled { BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: red! important }
DIV#menu { BACKGROUND: none transparent scroll repeat 0% 0%; WIDTH: 100%; CURSOR: pointer; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; WHITE-SPACE: nowrap; BORDER-LEFT-STYLE: none; BORDER-COLLAPSE: collapse; BORDER-BOTTOM-STYLE: none }
DIV#menu .a { FONT-WEIGHT: bold; FONT-SIZE: 11px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR: #000000; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; TEXT-DECORATION: none; BORDER-BOTTOM-STYLE: none }
DIV#menu .a TABLE { DISPLAY: block; FONT-FAMILY: Verdana, Arial, Sans-Serif; WHITE-SPACE: nowrap }
DIV#menu TABLE { DISPLAY: none }
DIV#menu TABLE A { DISPLAY: none }
DIV#menu .a:hover { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; BORDER-BOTTOM-STYLE: none }
DIV#menu .a:hover TABLE { BORDER-RIGHT: #ddd9a7 1px solid; DISPLAY: block; BACKGROUND: #eae9d5; BORDER-LEFT: #ddd9a7 1px solid; BORDER-BOTTOM: #ddd9a7 1px solid; WHITE-SPACE: nowrap; POSITION: absolute }
DIV#menu DIV.menuitem:hover TABLE { BORDER-RIGHT: #ddd9a7 1px solid; DISPLAY: block; BORDER-LEFT: #ddd9a7 1px solid; BORDER-BOTTOM: #ddd9a7 1px solid; WHITE-SPACE: nowrap; POSITION: absolute }
DIV#menu .a:hover TABLE A { BORDER-RIGHT: #eae9d5 1px solid; PADDING-RIGHT: 12px; DISPLAY: block; PADDING-LEFT: 12px; FONT-WEIGHT: bold; FONT-SIZE: 11px; Z-INDEX: 1000; PADDING-BOTTOM: 1px; COLOR: #000000; PADDING-TOP: 1px; WHITE-SPACE: nowrap; TEXT-DECORATION: none }
DIV#menu DIV.menuitem:hover TABLE A { BORDER-RIGHT: #eae9d5 1px solid; PADDING-RIGHT: 12px; DISPLAY: block; PADDING-LEFT: 11px; Z-INDEX: 1000; PADDING-BOTTOM: 1px; COLOR: #000000; PADDING-TOP: 1px; WHITE-SPACE: nowrap; TEXT-DECORATION: none }
DIV#menu .a:hover TABLE A:hover { PADDING-RIGHT: 12px; DISPLAY: block; PADDING-LEFT: 11px; FONT-WEIGHT: bold; FONT-SIZE: 11px; Z-INDEX: 1000; PADDING-BOTTOM: 0px; COLOR: #000000; PADDING-TOP: 0px; TEXT-DECORATION: none }
DIV#menu DIV.menuitem:hover TABLE A:hover { BORDER-RIGHT: #ddd9a7 1px solid; PADDING-RIGHT: 12px; PADDING-LEFT: 11px; Z-INDEX: 1000; PADDING-BOTTOM: 0px; BORDER-LEFT: #ddd9a7 1px solid; PADDING-TOP: 0px; BORDER-BOTTOM: #ddd9a7 1px solid; TEXT-DECORATION: none }
TD { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px }
.menuitem { PADDING-RIGHT: 0px; PADDING-LEFT: 15px; FONT-WEIGHT: bold; FONT-SIZE: 11px; FLOAT: left; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: transparent }
#other { VISIBILITY: visible; HEIGHT: auto }
#holder { WIDTH: 730px }
</STYLE>
<table width="995" HEIGHT="33" cellpadding="0" cellspacing="0" align="left" border="0">
<tr>
<td vAlign="top" align="left" width="730">
<TABLE id="holder" align="left">
<TR>
<TD id="other">
<DIV id="menu">
<asp:repeater id="Repeater1" runat="server">
<ItemTemplate>
<DIV class="menuitem">
<a Class="a" href="<%# GetChannelStartPageUrl(((Channel)(Container.DataItem))) %>">
<%# ((Channel)(Container.DataItem)).DisplayName %>
<BR>
<TABLE ID="Table2">
<asp:Repeater id="Repeater2" DataSource="<%# ((Channel)(Container.DataItem)).Channels %>" runat="server">
<ItemTemplate>
<tr>
<TD><A href="<%# GetChannelStartPageUrl(((Channel)(Container.DataItem))) %>"><%# ((Channel)(Container.DataItem)).DisplayName %></A></TD>
</tr>
</ItemTemplate>
</asp:Repeater>
</TABLE>
</a>
</DIV>
</ItemTemplate>
</asp:repeater>
</DIV>
</TD>
</TR>
</TABLE>
</td>
</tr>
</table>
_________________________________________________________________
