Hello guys, im trying to use the code in CSS and in ASP:MENU to redraw menu when browser changes the size or positions, and the submenus hides to right side.
Here is my screenshot to understand it.
See below image
And there is my code in CSS
.main_menu {
/*width: 100px;*/
background-color: #d9d9d9;
color: #000;
text-align: left;
/*height: 30px;*/
/*line-height: 30px;*/
margin-right: 2px;
padding: 5px;
padding-left: 5px;
padding-right: 5px;
/*margin-left:-100px;*/
top: 0;
left: 100%;
flex-direction: row;
}
.level_menu {
/*width: 110px;*/
background-color: #d9d9d9;
color: #000;
text-align: center;
/*height: 30px;*/
/*line-height: 30px;*/
margin-top: 4px;
padding: 5px;
/*top: 0;
left: 100px;*/
/*margin-left: -130px;*/
}
.selected_option:hover {
background-color: #595959;
color: #000;
}
.sublevel_menu {
top: 0;
float:none;
}
@media (max-width:1415px) {
.sublevel_menu {
/*left: -101%;*/
float:left;
}
}
And also this is my code in ASP:MENU
<asp:Menu ID="mnuPrincipal" runat="server" DataSourceID="PlanillasAsiAdmDS" Orientation="Horizontal" DynamicHorizontalOffset="15" DynamicVerticalOffset="2" MaximumDynamicDisplayLevels="5">
<StaticMenuItemStyle CssClass="level_menu"/>
<DynamicMenuItemStyle CssClass="main_menu" />
<DynamicSelectedStyle CssClass="sublevel_menu" />
<StaticHoverStyle ForeColor="White" BackColor="SlateGray" />
<DynamicHoverStyle ForeColor="White" BackColor="SlateGray" />
<DynamicMenuStyle VerticalPadding="5px" />
<StaticMenuStyle HorizontalPadding="5px" />
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="sublevel_menu" />
</LevelMenuItemStyles>
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="sublevel_menu" />
</LevelSubMenuStyles>
</asp:Menu>