Eu tenho um menu dinâmico no asp.net e um desses itens de menu contém um submenu, porém para acessar esse submenu acontece um evento "mouse hover" que não aparece no meu código. Preciso mudar esse evento "mouse hover" para click de alguma forma, nem que seja por css ou javascript, pois nos celulares android os navegadores não interpretam esse mouse hover
e ao tocar no menu ele da refresh na página.
Preciso de alguma propriedade do asp ou algo em css ou até mesmo uma função javascript para que esse hover vire um click.
IMAGEM do menu ---- https://i.sstatic.net/HMca5.jpg
menu asp dinamico:
<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
}
}
}
}
}
}
}
}