asp.net menu control css for child items
- by Andres
I have an asp.net menu control which the child items(submenu) width is tied to its parent's width, I was wondering is there a work around? because some of the titles for the submenu are longer than the title of the parent so it looks all smooshed together and just horrible on the eyes. Any help is much appreciated. :)
.net control:
<asp:Menu ID="navigation" runat="server" Orientation="Horizontal" CssClass="topmenu" MaximumDynamicDisplayLevels="20" IncludeStyleBlock="false">
<DynamicSelectedStyle />
<DynamicMenuItemStyle />
<DynamicHoverStyle />
<DynamicMenuStyle />
<StaticMenuItemStyle />
<StaticSelectedStyle />
<StaticHoverStyle />
</asp:Menu>
html rendered:
<div class="topmenu" id="navigation">
<ul class="level1">
<li><a class="popout level1" href="dashboard.aspx?option=1">Seguridad</a>
<ul class="level2">
<li><a class="level2" href="security/users.aspx?option=15">Usuarios</a></li>
<li><a class="level2" href="security/profiles.aspx?option=16">Perfiles</a></li>
<li><a class="level2" href="security/options.aspx?option=17">Opciones</a></li>
<li><a class="level2" href="security/actions.aspx?option=18">Acciones</a></li>
</ul>
</li>
</ul>
</div>
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; }
thats what I have and the styling works i just need help in getting submenus to expand if they are bigger than main title. Thanks in advance!
