Question

Ok I have an asp.net menu control which is created from codebehind. It works great but this is more for a user experience than functionality. If I resize my browser or my resolution is lower than what it was designed for then what happens is items that don’t fit in the line get pushed down to a second line. I would like to avoid that and simply hide items that won’t fit because of resolution. I hope it’s clear here’s my code:

<asp:Menu ID="navigation" runat="server" Orientation="Horizontal" CssClass="topmenu" MaximumDynamicDisplayLevels="20"  
 IncludeStyleBlock="false">
 <DynamicSelectedStyle />
 <DynamicMenuItemStyle />
 <DynamicHoverStyle  />
 <DynamicMenuStyle   />
 <StaticMenuItemStyle  />
 <StaticSelectedStyle />
 <StaticHoverStyle  />
 </asp:Menu>

css

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;  }

Answer 1

try wrapping it in another div something like

<div id="navWrapper">
    <asp:Menu ID="navigation" runat="server" Orientation="Horizontal" CssClass="topmenu" MaximumDynamicDisplayLevels="20"  
     IncludeStyleBlock="false">
     <DynamicSelectedStyle />
     <DynamicMenuItemStyle />
     <DynamicHoverStyle  />
     <DynamicMenuStyle   />
     <StaticMenuItemStyle  />
     <StaticSelectedStyle />
     <StaticHoverStyle  />
     </asp:Menu>
</div>

then alter the css like so

div.topmenu{}
div.topmenu ul
{
  list-style:none; 
  padding:5px 0; 
  margin:0;
  background: #0b2e56;
  float: left;
  width: 1000px;    
}
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;  }

#navWrapper{
    width: 100%;
    overflow: hidden;
    float: left;
}

hopefully that makes sense. I’ve not been able to test but use that theory and you should be set as the outer div will shrink up and hide the content as it gets smaller but the ul will stay a fixed 1000px inside that div, so won’t drop down as it shinks