I have a navigation bar that is completely controlled by CSS ul and li elements.
The first unordered list contains items that are always displayed (General Site pages). When hovering over the item "Gamma," the sub-items appear. These sub-items are themselves in an unordered list of car models with their names. Hovering over one of these items displays a picture of the car in a separate div.
Manually creating the list of cars works fine, displaying both the car models and their images correctly. However, when dynamically creating the unordered list through a listview, the car names are not shown.
If I place the listview outside of the navigation ul, it works correctly.
I suspect the issue has to do with the moment at which the listview creates the unordered list. Can anyone provide guidance on this?
Here is my ASP.NET code:
<nav>
<ul class="menu">
<li><a class="active" href="Default.aspx">H</a></li>
<li><a href="AixamGamma.aspx">Gamma</a>
**<asp:ListView ID="lvGamma" runat="server">
<LayoutTemplate>
<ul>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li><a href='<%# "AixamGamma.aspx?Model=" + Eval("car.NewCarID").ToString %>' class="sublistitem" >
<asp:Label ID="lblModelName" runat="server" Text='<%# Eval("car.ModelName") %>'></asp:Label></a>
<div class="modeldetail">
<div class="redbox">
<div class="whitebox">
<div class="container_12">
<div class="wrapper">
<div class="grid_5">
<h3>
<asp:Label ID="lblModelSlogan" runat="server" Text='<%# Eval("car.Slogan") %>'></asp:Label>
</h3>
</div>
<div class="grid_3">
<div class="wrapper">
<img src='<%# Eval("image.ImageLocationPath") + Eval("image.ImageFileName")%>' alt='<%# Eval("car.ModelName") %>'
class="img-max-h200-w200" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ItemTemplate>
</asp:ListView>**
*<ul>
<li><a href="AixamGamma.aspx#City" class="sublistitem">City</a></li>
<li><a href="AixamGamma.aspx#CityS" class="sublistitem">CityS</a></li>
<li><a href="#" class="sublistitem">Crossline</a></li>
<li><a href="#" class="sublistitem">GTO</a>
<div class="modeldetail">
<div class="redbox">
<div class="whitebox">
<div class="container_12">
<div class="wrapper">
<div class="grid_5">
<h2>
De nieuwe Aixam Gto</h2>
<p>
Rijden zonder rijbewijs in een sportief kleedje</p>
</div>
<!--- image width max 220px --->
<div class="grid_3">
<div class="wrapper">
<img src="images/Sliders/Aixam%20GTO.jpg" alt="Gto" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li><a href="#" class="sublistitem">Crossover</a></li>
</ul>*
</li>
<li><a href="UnderConstruction.aspx">Tweedehands</a></li>
<li><a href="Onderhoud.aspx">Onderhoud/herstelling </a></li>
<li><a href="Wetgeving.aspx">Wetgeving</a></li>
<li><a href="Contact.aspx">Contact</a></li>
</ul>
</nav>
The highlighted part does not work unless placed outside the navigation list, while the italicized section functions properly.
Thank you for your assistance.