Height of a css frindly menu

Dec 10, 2008 at 1:34 PM
I have altered the simplemenu.css and the sample menu to have a menu that allows item wrapping.  this works fine, except that the items are not the same height.  If I try to adjust the height of the Tier one css class it becomes too small, showing the text but not the background.  changing the height of the menu control seems to have no effect. which element needs the height changed for this to work correctly?


Dec 10, 2008 at 2:07 PM
I realize that this doesn't answer your question, but do you really need to have all the menu items the same height? I have a vertical menu on our corporate site that allows wrapping, and the height of each item depends on how many lines it has. Seems to work just fine... (at least, no one has sent a vitriolic e-mail asking why our menu items are different heights ;-)

Dec 10, 2008 at 2:36 PM
Yes, they must be the same height because it is a horizontal menu.
Dec 10, 2008 at 2:52 PM
It's been a while since I put the horizontal menu together, but in looking at my style sheet, I see height set in 2 places:

  background-color: #000;
  color: #FC0;
  padding: 0 24px;
  font-size: 1.083em;
  position: relative;
  height: 24px;
  vertical-align: middle;
  display: block;
  z-index: 900;

.mainNavMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
  height: 24px !important;

The mainNavMenu class is assigned as the CssSelectorClass for the <asp:Menu> control, and the whole thing is contained in a div with ID of mainMenu.

My horizontal menu is only one line, but I don't see why you couldn't set the height large enough to contain 2 lines.