2

在过去的几天里，我一直在寻找这个问题的答案，但似乎找不到任何东西。

我有一个 CSS 下拉菜单，当某个链接悬停在上面时需要出现。正常的 css 属性不起作用，因为“父”项是动态创建的，而填充菜单的链接是静态创建的。这会导致菜单在您将鼠标悬停在导航菜单中的任何项目上时出现，而不仅仅是它应该出现的一个项目。

我正在寻找的是一个简单的 javascript 解决方案，它可以获取悬停/鼠标悬停项目的 url，以便在悬停正确项目时有条件地显示我的菜单。

任何帮助/想法/提示将不胜感激

这是我的源代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="LeftNav.ascx.cs" Inherits="Siteworx.Web.layouts.sublayouts.global.LeftNav" %>
<div id="left_nav">
  <asp:Repeater runat="server" ID="SubSectionNav" OnItemDataBound="SubSectionNav_ItemDataBound">
    <HeaderTemplate>
      <ul>
    </HeaderTemplate>
    <FooterTemplate>
      </ul>
    </FooterTemplate>
    <ItemTemplate>
      <asp:Panel ID="Panel1" runat="server" visible='<%#(IsActive(Container.DataItem) == "active")%>'>
        <li class="active">
          <a href="<%# DataBinder.Eval(Container.DataItem, " url ")%>"><%# DataBinder.Eval(Container.DataItem, "title")%></a>
          <asp:Repeater runat="server" ID="SubSubSectionNav">
            <HeaderTemplate>
              <ul class="sub_nav" id="drop_down_nav">
            </HeaderTemplate>
            <FooterTemplate>
              </ul>
            </FooterTemplate>
            <ItemTemplate>
              <ul>
                <%#(IsActive(Container.DataItem)=="active" ) ? "<li class=\"active\ ">" : "<li>" %><a href="<%# DataBinder.Eval(Container.DataItem, " url ")%>"><%# DataBinder.Eval(Container.DataItem, "title")%></a>
                  <ItemTemplate>
                    <ul>
                      <li><a href="http://MyLink/1.aspx">1</a></li>
                      <li><a href="http://MyLink/2.aspx">2</a></li>
                      <li><a href="http://MyLink/3.aspx">3</a></li>
                      <li><a href="http://MyLink/4.aspx">4</a></li>
                      <li><a href="http://MyLink/5.aspx">5</a></li>
                      <li><a href="http://MyLink/6.aspx">6</a></li>
                      <li><a href="http://MyLink/7.aspx">7</a></li>
                      <li><a href="http://MyLink/8.aspx">8</a></li>
                      <li><a href="http://MyLink/9.aspx">9</a></li>
                      <li><a href="http://MyLink/10.aspx">10</a></li>
                      <li><a href="http://MyLink/11.aspx">11</a></li>
                      <li><a href="http://MyLink/12.aspx">12</a></li>
                      <li><a href="http://MyLink/13.aspx">13</a></li>
                    </ul>
                  </ItemTemplate>
                </li>
              </ul>
            </ItemTemplate>
          </asp:Repeater>
        </li>
      </asp:Panel>
      <asp:Panel ID="Panel2" runat="server" visible='<%#(IsActive(Container.DataItem) == "")%>'>
        <li><a href="<%# DataBinder.Eval(Container.DataItem, " url ")%>"><%# DataBinder.Eval(Container.DataItem, "title")%></a></li>
      </asp:Panel>
    </ItemTemplate>
  </asp:Repeater>
</div>

还有我的 CSS：

#drop_down_nav ul ul {
    display: none;
}
#drop_down_nav ul li:hover > ul {
    display: block;
}
#drop_down_nav ul {
    background: #ffffff;
    background: linear-gradient(top, #ffffff 0%, #999999 100%);
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #999999 100%);
    /*box-shadow: 0px 0px 9px rgba(0,0,0,0.15);*/
    padding: 0 2px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}
/*
#drop_down-nav ul:after {
    content: ""; clear: both; display: block;
}
*/
 #drop_down_nav ul li {
    float: left;
}
#drop_down_nav ul li:hover {
    background: #F6EFE5;
    background: linear-gradient(top, #4f5964 0%, #F6EFE5 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #F6EFE5 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%, #F6EFE5 40%);
}
#drop_down_nav ul li:hover a {
    color: #4D4D4D;
}
#drop_down_nav ul li a {
    display: block;
    padding: 25px 40px;
    color: #757575;
    text-decoration: none;
}
#drop_down_nav ul ul {
    background: #F6EFE5;
    border-radius: 1px;
    padding-top: 1em;
    position: absolute;
    top: 100%;
    border-top: 1px solid #D7D7D7;
    border-bottom: 1px solid #D7D7D7;
    border-left: 1px solid #D7D7D7;
    border-right: 1px solid #D7D7D7;
}
#drop_down_nav ul ul li {
    float: none;
    border-bottom: 1px solid #C6D3D9;
    position: relative;
}
#drop_down_nav ul ul li a {
    padding: 15px 40px;
    color: #fff;
}
#drop_down_nav ul ul li a:hover {
    background: #F6EFE5;
}

再次，非常感谢任何帮助。谢谢你。

HTML 输出：

</div>

            <div id="main_content_0_left_nav_0_SubSectionNav_ctl06_Panel1">

                <li class="active"><a href="/Nav-Heading/Sub-Nav-Heading.aspx">SECTION HEADING</a>
                <ul class="sub_nav" id= "drop_down_nav">




                        <itemtemplate> 

                             <ul>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-1.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-2.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-3.aspx">Item 3</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-4.aspx">Item 4</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-5.aspx">Item 5</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-6.aspx">Item 6</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-7.aspx">Item 7</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-8.aspx">Item 8</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-9.aspx">Item 9</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-10.aspx">Item 10</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-11.aspx">Item 11</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-12.aspx">Item 12</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-13.aspx">Item 13</a> </li></ul>
                        </itemtemplate>


                    </li></ul>






                        <itemtemplate> 

                             <ul>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-1.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-2.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-3.aspx">Item 3</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-4.aspx">Item 4</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-5.aspx">Item 5</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-6.aspx">Item 6</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-7.aspx">Item 7</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-8.aspx">Item 8</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-9.aspx">Item 9</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-10.aspx">Item 10</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-11.aspx">Item 11</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-12.aspx">Item 12</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-13.aspx">Item 13</a> </li></ul>
                        </itemtemplate>


                    </li></ul>






                        <itemtemplate> 

                             <ul>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-1.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-2.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-3.aspx">Item 3</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-4.aspx">Item 4</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-5.aspx">Item 5</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-6.aspx">Item 6</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-7.aspx">Item 7</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-8.aspx">Item 8</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-9.aspx">Item 9</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-10.aspx">Item 10</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-11.aspx">Item 11</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-12.aspx">Item 12</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-13.aspx">Item 13</a> </li></ul>
                        </itemtemplate>


                    </li></ul>






                        <itemtemplate> 

                             <ul>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-1.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-2.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-3.aspx">Item 3</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-4.aspx">Item 4</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-5.aspx">Item 5</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-6.aspx">Item 6</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-7.aspx">Item 7</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-8.aspx">Item 8</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-9.aspx">Item 9</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-10.aspx">Item 10</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-11.aspx">Item 11</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-12.aspx">Item 12</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-13.aspx">Item 13</a> </li></ul>
                        </itemtemplate>


                    </li></ul>






                        <itemtemplate> 

                             <ul>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-1.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-2.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-3.aspx">Item 3</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-4.aspx">Item 4</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-5.aspx">Item 5</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-6.aspx">Item 6</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-7.aspx">Item 7</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-8.aspx">Item 8</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-9.aspx">Item 9</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-10.aspx">Item 10</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-11.aspx">Item 11</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-12.aspx">Item 12</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-13.aspx">Item 13</a> </li></ul>
                        </itemtemplate>


                    </li></ul>






                        <itemtemplate> 

                             <ul>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-1.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-2.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-3.aspx">Item 3</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-4.aspx">Item 4</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-5.aspx">Item 5</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-6.aspx">Item 6</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-7.aspx">Item 7</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-8.aspx">Item 8</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-9.aspx">Item 9</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-10.aspx">Item 10</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-11.aspx">Item 11</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-12.aspx">Item 12</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-13.aspx">Item 13</a> </li></ul>
                        </itemtemplate>


                    </li></ul>






                        <itemtemplate> 

                             <ul>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-1.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-2.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-3.aspx">Item 3</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-4.aspx">Item 4</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-5.aspx">Item 5</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-6.aspx">Item 6</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-7.aspx">Item 7</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-8.aspx">Item 8</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-9.aspx">Item 9</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-10.aspx">Item 10</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-11.aspx">Item 11</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-12.aspx">Item 12</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-13.aspx">Item 13</a> </li></ul>
                        </itemtemplate>


                    </li></ul>






                        <itemtemplate> 

                             <ul>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-1.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-2.aspx">Item 2</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-3.aspx">Item 3</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-4.aspx">Item 4</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-5.aspx">Item 5</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-6.aspx">Item 6</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-7.aspx">Item 7</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-8.aspx">Item 8</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-9.aspx">Item 9</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-10.aspx">Item 10</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-11.aspx">Item 11</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-12.aspx">Item 12</a> </li>
                                <li><a href="http://dev.**.org/Nav-Heading/Sub-Nav-Heading/Sub2-Nav-Heading/Item-13.aspx">Item 13</a> </li></ul>
                        </itemtemplate>


                    </li></ul>

                   </ul>

4

2 回答 2

1

jQuery是解决方案！

$("a").hover(function(){
  // if the hovered anchors href is equal to some url
  // you can use <%= &> tags to refer to a server value
  if ($(this).attr("href") == '<%= some server value %>') {
    // do your stuff here

  }
});
于 2013-05-22T08:16:57.350 回答
0

如果 html 的结构不正确，请检查此内容。

于 2013-05-22T08:20:21.453 回答