I have a dynamic menu in ASP.NET and one of these menu items contains a submenu, however to access this submenu a mouse hover event does not appear in my code. I need to change this "mouse hover" event to click somehow, even if it is by css or javascript, because on android mobiles browsers do not interpret this mouse hover and when touching the refresh menu on the page.
I need some asp property or something in css or even a javascript function for this hover to make a click.
IMAGE from the menu ---- link
dynamic asp menu:
<asp:Menu ID="MenuPessoal" runat="server"
BackColor="#6d7fcc"
DynamicHorizontalOffset="3"
Font-Names="'Poppins', sans-serif"
Font-Size="22px"
ForeColor="white"
StaticSubMenuIndent="8px"
CssClass="your bootstrap classes"
Font-Bold="False"
StaticMenuStyle-CssClass="nav navbar-nav"
Orientation="Vertical" OnMenuItemClick="MenuPessoal_MenuItemClick">
<StaticSelectedStyle BackColor="#6d7fcc" />
<StaticHoverStyle BackColor="#6d7fcc" ForeColor="black" />
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
<DynamicHoverStyle BackColor="#6d7fcc" ForeColor="black" />
<DynamicMenuStyle BackColor="#6d7fcc" />
<DynamicSelectedStyle BackColor="#6d7fcc" />
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
</asp:Menu>
códido html puro:
<nav id="sidebar" class="active">
<div class="sidebar-header">
<h3 id="idSistema">SAD</h3>
</div>
<ul class="list-unstyled CTAs">
<li class="active">
<a href="#BemVindo" data-toggle="collapse" aria-expanded="false" style="padding-right: 130px; margin-right: 100px; width: 245px; margin-left: -15px;">
<img src="icons/user.png" width="25" height="25">
<span id="LblBemVindo">dgmenezes</span></a>
<ul class="collapse list-unstyled" id="BemVindo" style="background-color: #6d7fcc; margin-right: 100px;">
<li style="background-color: #6d7fcc;">
<ul class="list-unstyled ">
<li class="active">
<a href="menuhome.aspx" aria-expanded="false">Home</a>
</li>
<li>
<a href="#Conteudos" data-toggle="collapse" aria-expanded="true" class="">Conteúdos</a>
<ul class="list-unstyled collapse in" id="Conteudos" style="background-color: rgb(109, 127, 204); margin-left: -3%;" aria-expanded="true">
<li style="background-color: #6d7fcc;">
<a href="#MenuPrincipal_SkipLink"><img alt="Skip Navigation Links" src="/WebResource.axd?d=f-uxuyZYSnmzvR6QIWcmHqRLle2WyFSPKO2uYQ_adh0Nm_h7iZzJLvDgivY_jscHuMhl4XJaKiOSH6U0fbcbIyt6gMIMCpdv3bV_xZfCbec1&t=635918659619348548" width="0" height="0" style="border-width:0px;"></a><div class="your bootstrap classes" id="MenuPrincipal" style="float: left;">
<ul class="level1 nav navbar-nav static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;">
<li role="menuitem" class="static" style="position: relative;"><a title="Coord. Regional" class="level1 static" href="MenuConteudo.aspx?l=es&CodFrm=ArqCoordRegional" tabindex="-1">Coord. Regional</a></li><li role="menuitem" class="static" style="position: relative;"><a title="Divulgador" class="level1 static" href="MenuConteudo.aspx?l=es&CodFrm=ArqDivulgador" tabindex="-1">Divulgador</a></li><li class="has-popup static" aria-haspopup="MenuPrincipal:submenu:10" role="menuitem" style="position: relative;"><a title="MenuNivel1" class="popout level1 static" href="#" onclick="__doPostBack('ctl00$MenuPrincipal','HSM1')" tabindex="-1">MenuNivel1</a><ul class="level2 dynamic" id="MenuPrincipal:submenu:10" style="display: none; position: absolute; top: 0px; left: 100%;">
<li role="menuitem" class="dynamic" style="position: relative;"><a title="Comissão" class="level2 dynamic" href="MenuConteudo.aspx?l=es&CodFrm=ArqComissao" tabindex="-1">Comissão</a></li><li role="menuitem" class="dynamic" style="position: relative;"><a title="Organização" class="level2 dynamic" href="MenuConteudo.aspx?l=es&CodFrm=ArqOrganizacao" tabindex="-1">Organização</a></li>
</ul></li>
</ul>
</div><div style="clear: left;"></div><a id="MenuPrincipal_SkipLink"></a>
</li>
</ul>
</li>
<li>
<a href="#sistemas" data-toggle="collapse" aria-expanded="false">Menu Sistemas</a>
<ul class="collapse list-unstyled" id="sistemas" style="background-color: #6d7fcc;">
<li style="background-color: #6d7fcc; height: auto;">
</li>
</ul>
</li>
</ul>
</nav>
private void MenuAdd(ref Menu MenuAtual, MenuItem NovoItemMenu, string iNivelMenu, string ParentIDSemMenu)
{
if (iNivelMenu == "0")
{
MenuAtual.Items.Add(NovoItemMenu);
}
else
{
foreach (MenuItem x in MenuAtual.Items)
{
if (iNivelMenu == "1")
{
if (x.Value.Equals(ParentIDSemMenu))
{
MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems.Add(NovoItemMenu); // aqui eu adiciono o SUBMENU ao menu PAI correto. Mas não está funcionando direito
break; // sai do FOR
}
}
else
{
foreach (MenuItem x2 in MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems)
{
if (Convert.ToInt32(iNivelMenu) == 2)
{
if (x2.Value.Equals(ParentIDSemMenu))
{
MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems[MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems.IndexOf(x2)].ChildItems.Add(NovoItemMenu);
break; // sai do FOR
}
}
else if (Convert.ToInt32(iNivelMenu) == 3)
{
foreach (MenuItem x3 in MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems[MenuAtual.Items[MenuAtual.Items.IndexOf(x)].ChildItems.IndexOf(x2)].ChildItems)
{
if (x3.Value.Equals(ParentIDSemMenu))
{
//Incluir o codigo aqui para o nivel 3
break; // sai do FOR
}
}
}
}
}
}
}
}