Gridview og en lille menu ?

Hejsa,

Jeg har lavet en simpel context menu ved hjælp <ul>...</ul> som jeg ligger i en <itemtemplate>...</itemtemplate> i et gridview.

Det der undre mig en smule er at menu'en kun vises ved den første record og ikke ved de efterfølgende. Her kommer lige lidt kode.

I mit gridview:

<ItemTemplate>
    <ul id="nav">
        <li>Handling
            <ul>
                <li><a href="">Ny underside</a></li>
                <li><a href="">Nyt afsnit</a></li>
                <li><a href="">Rediger side</a></li>
                <li><a href="">Slet side</a></li>
                <li><span class="line linex" ></span></li>
                <li><a href="">Vis side</a></li>
                <li><a href="">Vis i browser</a></li>
            </ul>
        </li>
    </ul>
</ItemTemplate>

Og så er der lavet noget css :

#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
}

#nav a {
    display: block;
    width: 10em;
}

#nav li { /* all list items */
    float: left;
    width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
    position: absolute;
    background: url(contextmenu_bg.gif) repeat-y;
    border: solid 1px #dedede;
    width: 10em;
    padding-left:2px;
    left: -10000em;  /*using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul a { /* second-level lists */
    padding: 2px 3px 5px 3px;
}

#nav li ul a:hover { /* second-level lists */
    padding: 0px 1px 3px 1px;
    margin: 1px 1px 1px 1px;
    background-color:#C1D2EE;
    border:solid 1px #316AC5;
}

#nav li:hover ul,
#nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}

#nav .line   
{
    display:block;
    font-size:1px;
    border-width:0px;
    border-style:solid;
    position:relative;
    z-index:1;
}

#nav .linex
{   
    border-top-width:1px;
    margin-left: 24px;
    border-color:#dedede;
}

Og en smule javascript :

sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

Jeg ved ikke hvad jeg går forkert så måske der sidder en her der kan se en fejl :o)