I must express my gratitude for the wealth of knowledge this site has provided me with. It has been an invaluable resource for me this year, even though I have scoured every corner and still come up empty-handed.
Allow me to simplify the situation at hand:
- There is an ASP:Menu that fetches its data from the database, including parent and child elements linked with IDs.
- This data is then passed into a recursive method that constructs the menu items, properly assigning children to their respective parents - all functioning flawlessly.
- The next step involves populating the asp:menu control on the webpage - again working perfectly.
- Upon completion, the asp:menu gracefully displays the menu items without any issues.
However, here lies the main challenge:
After three painstaking days, despite attempting the simplest approach, I have failed to achieve one goal: displaying all children items of the parents (meaning ALL children) WITHOUT needing to hover over the parents AND without utilizing Javascript. Only pure CSS and HTML combined with C# for the code behind ASP.Net should be used.
I am seeking something along these lines:
Transitioning from:
nav > ul > li:hover > div{ display: block; opacity: 1; visibility: visible; }To:
nav > ul > li > div{ display: block; opacity: 1; visibility: visible; }
The aforementioned code snippet implies that no hover action is required over the parent items to display their children. Essentially, I require a similar solution for my asp:menu's parent-child relationship. Each parent has only 1 level of children without any grandchildren. A single parent can have multiple children before moving on to other parents and their corresponding children.
Below is an example of the data structure I'm dealing with:
Company
|--- About Us
|--- Services
|--- Presentation
|--- Clients
Products
|--- Commercial
|--- Residential
This is the code snippet for the asp:menu component:
<asp:Menu ID="uxLiteral1" Orientation="Horizontal" runat="server"
OnMenuItemClick="Bottom_Click" SkipLinkText=""
StaticEnableDefaultPopOutImage="False" IncludeStyleBlock="False"/>
While I understand that CSS could potentially solve this issue, I am open to exploring any alternatives available.
I apologize for the lengthy post and appreciate your help in advance!
P.S.: I have already explored the StaticDisplayLevels property but it does not stack the items vertically under each other, making it unsuitable for my situation. I am willing to utilize alternate controls if necessary.
EDIT: Here is the CSS code that was automatically generated by the asp:menu, failing to display the items as intended despite efforts:
.FooterDetails > .Square > #BotMenu1_UpdatePanel1 > #BotMenu1_uxLiteral1 > ul.static
{
font-weight: bold;
}.FooterDetails > .Square > #BotMenu1_UpdatePanel1 > #BotMenu1_uxLiteral1 > ul.static > li.static > ul.dynamic > li.dynamic > a.dynamic
{
font-weight: normal;
visibility: visible !important;
padding-right: 25px;
margin-bottom: 3px;
}The static class represents the parent items such as "Company" and "Products." The dynamic class denotes the children of the static class.