Could someone help me? make menu fixed with submenu

[Alvesanderson]

I'm new to my company and I'm solving some CSS issues on my page.

I'm using VB as codebehind, but the problem is front end.

I have a big menu that slides in horizontal getting the rest hidden content when you click in the circled red button.

Also, I have a submenu coloured in blue.




My boss told me to make the menu fixed and when I add possition fixed and overflow hidden to the menu, the submenu doesn't open. Well, if I put overflow to visible I get this



Is there a way to make it fixed and the submenu functional?

Below my code

<div class="top-menu" id="dvMenu">


<ul class="nav" style="">
<li> <a href="../home/index">Dashboard</a> </li>
<li id="li_Messages" class="has-sub">

<a href="#" style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
<div>
<b class="caret pull-right"></b>
<i class="fa fa-envelope-o"></i>
<span>Messages</span>
</div>
</a>

<ul class="sub-menu">

<li><a href="">Manual send</a></li>
<li><a href="">File Upload</a></li>
<li><a href="">Register message</a></li>
<li><a href="">Register Monitor</a></li>
<li><a href="">Register Cost Center</a></li>
<li><a href="">Register Campaigns</a></li>
<li><a href="">Subscribe</a></li>
<li><a href="#">Fraud Register</a></li>
<li><a href="../create/contato">Cadastro de Contatos</a></li>
<li><a href="#">Manual Flow Control</a></li>
</ul>
</li>
<li id="li_EMail" class="has-sub">

<a href="#">
<div>
<b class="caret pull-right"></b>
<i class="fa fa-code"></i>
<span>E-Mail</span>
</div>
</a>

<ul class="sub-menu">

<li><a href="../create/email">Layout de E-Mail</a></li>
<li><a href="../create/dominios">Domínios e Remetentes</a></li>
</ul>
</li>
<li id="li_Search" class="has-sub">
<a href="#">
<div>
<b class="caret pull-right"></b>
<i class=""></i>
<span>Search</span>
</div>
</a>

<ul class="sub-menu">

<li><a href="#">Manual Enrichment</a></li>
<li><a href="#">Enrichment Archive</a></li>
<li><a href="#">Enrichment Results</a></li>
</ul>
</li>

<a href="#">
<div>
<b class="caret pull-right"></b>
<i class="fa fa-cogs"></i>
<span>Management</span>
</div>
</a>

<ul class="sub-menu">

<li><a href="../Gerencial/">Gateway Control</a></li>
<li><a href="../Gerencial/">Gateway Distribution</a></li>
<li><a href="../Gerencial/">Bind de Gateway</a></li>
<li><a href="../Gerencial/">Company Portfolio</a></li>
<li><a href="../Gerencial/">Level Register</a></li>
<li><a href="../Gerencial/">Menus Registration</a></li>
<li><a href="../Gerencial/">Layouts Registration</a></li>
<li><a href="../Gerencial/">Monitors Registration</a></li>
<li><a href="../Gerencial/">Reporting Record</a></li>
<li><a href="../Gerencial/">Shooting Control</a></li>
<li><a href="../Gerencial/Dashboard">Dashboard</a></li>
<li><a href="#">Gateway Registration</a></li>
<li><a href="#">Server</a></li>
<li><a href="#">Dashboard - RT</a></li>
<li><a href="#">Informative Record</a></li>
<li><a href="../gerencial/">Gerenciamento Site</a></li>
</ul>
</li>

</ul>

</div>

#dvMenu {
background-image: linear-gradient(to top, rgb(43, 56, 61), rgb(43, 56, 61));
height: 40px;
margin-left: -540px;
margin-top: 70px;
overflow: visible;
;
}









Se o meu conteúdo resolveu o seu problema ou sua dúvida, então marque como "Resposta", ou se foi útil, "Vote". Pois isso ajudará outras pessoas com o mesmo problema ou dúvida.

Continue reading...