I'm currently using an asp.net menu control created from codebehind for a better user experience. However, when the browser is resized or the resolution is lower than intended, items that don't fit get pushed down to a second line. I want to hide these items instead of pushing them to the next line based on resolution. Here's the code snippet:
<asp:Menu ID="navigation" runat="server" Orientation="Horizontal" CssClass="topmenu" MaximumDynamicDisplayLevels="20"
IncludeStyleBlock="false">
<DynamicSelectedStyle />
<DynamicMenuItemStyle />
<DynamicHoverStyle />
<DynamicMenuStyle />
<StaticMenuItemStyle />
<StaticSelectedStyle />
<StaticHoverStyle />
</asp:Menu>
CSS styling:
div.topmenu{}
div.topmenu ul
{
list-style:none;
padding:5px 0;
margin:0;
background: #0b2e56;
}
div.topmenu ul li
{
float:left;
padding:10px;
color: #fff;
height:16px;
z-index:9999;
margin:0;
}
div.topmenu ul li a, div.menu ul li a:visited{ color: #fff; }
div.topmenu ul li a:hover{ color:#fff; }
div.topmenu ul li a:active{color:#fff; }