ASP:Menu children stays visible

Question

First of all, I want to say that I still think this site has the best answers. Helped me a lot throughout this year. Basically, I have looked everywhere but have come up empty.

Ok, so I will try and keep this as simple as I can:

1. I have an ASP:Menu that retrieves it data from the database. This includes its parents and children linked with id's.
2. This is then added into a recursive method that creates the menu items, adding children to the correct parents. - Still fine here. Works perfectly.
3. It then goes through to populate the asp:menu control that I have inserted on my web page. - Still fine here as well.
4. Then after the items have been added, the asp:menu displays it beautifully I might add. So I'm still fine here as well.

The next part is what is the main issue:

After 3 agonizing days, I've tried to do the most simplest thing but to absolutely no avail: Displaying all of the children items of the parents (meaning ALL of the parents' children) WITHOUT hovering over the parents AND without using Javascript. Only pure CSS and HTML along with the C# for the code behind the ASP.Net.

I want something like the following:

• From something like:

  nav > ul > li:hover > div{ display: block; opacity: 1; visibility: visible; }

• To

  nav > ul > li > div{ display: block; opacity: 1; visibility: visible; }

The sample code above basically means that no hover is needed over the parent items in order to display the children. So, in a nutshell, I need something similar for my asp:menu parents and children. I only have level of children. 等级的孩子。 This means that my children doesn't have children. 1 parent with multiple children and that is it. Then it goes over to the other parents and children.

The following is an example of the data structure that I have:

• Company

  |--- About Us

  |--- Services

  |--- Presentation

  |--- Clients

• Products

  |--- Commercial

  |--- Residential

This is the code for the asp:menu that I have:

<asp:Menu ID="uxLiteral1" Orientation="Horizontal" runat="server"
OnMenuItemClick="Bottom_Click" SkipLinkText=""
StaticEnableDefaultPopOutImage="False" IncludeStyleBlock="False"/>

As I understand, this can be done with CSS, but at this point, I will take anything I can.

I apologize for the long post, and thank you so much in advance!!

PS: I have already looked at the StaticDisplayLevels property and that doesn't add it underneath each other. So that won't work for me. I am open to use any other controls to get the job done.

EDIT : Here is the CSS code that I have found the asp:menu generates itself with the code that should supposedly display the items the menu houses, but currently it just doesn't seem to work.

.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 is the first item, ie the Header for my items and also the parent. In this case it would be the "Company" and "Products".

The dynamic class is the children the static class houses.

Answer 1

Well after another day of struggling to figure this one out, the answer appears to be simple enough.

Giving the asp:menu a new css class like so:

<asp:Menu ID="uxLiteral1" runat="server" CssClass="FooterMenu" Orientation="Horizontal"     IncludeStyleBlock="false" StaticEnableDefaultPopOutImage="False"     OnMenuItemClick="NavigationMenu_MenuItemClick" DisappearAfter="0" />

The CSS would then be changed so that the menu and all of its items become linked to only the following CSS:

div.FooterMenu
{
    align-content: center !important;
}

div.FooterMenu ul
{
    list-style: none;
    display: inline-block !important;
}

    div.FooterMenu ul li
    {
        padding-right: 65px;
        margin-bottom: 3px;
    }

This would give you the desired effect of displaying all of the child items per parent without any hover effect. Again, I feel like da real MVP.