A new "down-left" style

I don't understand exactly what you mean by expanding the viewing area with DIVs? The menu must be placed at the right edge of the page, so if it expands to the right, it moves out of the screen. So I guess I have no room there...

I hacked myself through the css code and figured out it didn't need much change to make the horizontal menu expand its submenues to the left.

So I wrote a little patch that adds a new "down-left" style option to the nice_menus module.

Let me know what you think about it!

Doh, I forgot that it isn't enough to move the submenues to the left. Of course the first drop down (below the top items) must be justified at the right border of the top item, not the left border. Otherwise submenus will unfold to the left correctly, but the menu items itself might move out of the screen on the right side.

So here's the second try.

The only problem I have without a patch is getting both down menues at the same time, i.e. one down-menu that expands to the right (for items at the left border) and one that expands to the left (for items at the right border).
But I guess that's sth. very specific to our site.

I will make a addon-css file (i.e. no patching) for changing the down style to down-left and post it here as example.

Ok, this css code added to your own css file (or appended to nice_menus_default.css) will change the default down menu to a down-left menu for anyone needing this :-)

ul.nice-menu-down {
  float: left;
  border: 0;
}

ul.nice-menu-down li {
  border-top: 1px solid #ccc;
}


ul.nice-menu-down li li {
/* We must keep the border  because the ul top-border doesn't
  move to the left together with the ul element. So we keep
  the li borders, but to avoid double borders we let top-
  and bottom borders overlap to make them one line. */
  border-top: 1px solid #ccc;
  margin-top: -1px;
  top: 1px;
}

ul.nice-menu-down ul {
  border-top: 0;
  left: 100%;
  right: 0;
}

ul.nice-menu-down ul li {
  right: 12.55em;  
  clear: both;
}

ul.nice-menu-down li ul li ul {
  width: 12.5em;
  left: -0.05em;
  top: -1px;
}

ul.nice-menu-down .menuparent a {
  padding-left: 15px;
  padding-right: 5px;
}

ul.nice-menu-down li.menuparent,
ul.nice-menu-down li.menuparent:hover,
ul.nice-menu-down li.over {
  background-position: left;
}

ul.nice-menu-down li li.menuparent,
ul.nice-menu-down li li.menuparent:hover,
ul.nice-menu-down li li.over {
  background: #ccc url(arrow-left.png) left center no-repeat;
}