I've been looking for an answer for this for the last couple of days but cannot seem to find anything.
I have a css drop menu that needs to appear when a certain link is hovered over. Normal css properties are not working as the "parent" items are dynamically created while the links that populate the menu are statically created. This causes the menu to appear whenever you hover over any item in the navigation menu, instead of just the one item that it is supposed to appear for.
What I am looking for is a simple javascript solution that can grab the url of a hovered/mouseover item to conditionally display my menu when the correct item is hovered.
Any help/ideas/hints would be greatly appreciated
Here is my Source code:
<%@ 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>
And my 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;
}
Once again, any help is greatly appreciated. Thank you.
HTML Output:
</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>
itemtemplate
isn't a valid html element, etc. No errors are shown just because of browser's capacity to interpret even malformed markup...