CSS for horizontal children

You need to select "down" as the Menu Style on the block configuration page.

Could someone post the css to make the menu that drops down from a down menu appear horizontal, thanks

Changing title to be more accurate.

I wanted to have the same feature - Nice Menus that displays every level of the menu in horizontal way. I called it down-down and posted the code here http://drupal.org/node/248365 I hope it helps

Thanks kasiawaka! Since that is changing the module to add a new option, I'll change this to a feature request.

Whoops, also going to move to V2 since it is a new feature.

I have rolled kasiawaka's handbook page into a patch against HEAD. Not tested.

Here is a much updated patch that cleaned some stuff up and takes into account the Garland header junk. I played around with it some and I'm not a fan of this patch as-is. It does lay out children horizontally but they aligned left under the parent (the first child is directly under the parent and then siblings march out to the right). Almost any horizontal menu I've seen has the horizontal layers under the parents styled for the full width of the parent menu and often the children are always set either to the left of the whole menu (not its parent) or centered. See http://www.cssplay.co.uk/menus/dd_valid_2.html for examples.

I only want to add this to NM if it look and acts very like what people expect out of the box and has good docs on at least one or two ways to style it. So, here is a patch, but it definitely still needs work from CSS folks.

@add1sun: I tried out the patch because it was exactly what I needed to do (2 or 3 horizontal levels; primary, secondary and tertiary). For some reason I overlooked your comments that the children don't align left, and spent a lot of time trying to fix it in CSS, but it was to no avail. I used the Zen theme, the one I am most familar with.

So, "downdown" is very useful provided -- as you said -- it follows the expected behavior of being left-aligned.
---------

An additional feature would be a CSS-hybrid menu that always shows the secondary links of the "active" primary link, as in:

http://www.alistapart.com/d/hybrid/hybrid-4.html#

The actual article is at: http://www.alistapart.com/articles/hybrid/

So, my feature request would be a "left-aligned downdown" menu with persistent secondary links.

PS: Nice_Menus makes me smile, tks.

Hi....I actually achieved this effect without even knowing about this patch by using css only. I think the trick is setting ul parent to position relative and child to position absolute.

Regards,

Marius

Hi!
I got the horizontal childs working as described at http://drupal.org/node/248365
But what I need is not a fixed width but a width depending on the strings length. I think it should work with float: left but it doesn't. Need help!
Any suggestions?

/******************************
 HORIZONTAL (down) menus
******************************/

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

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

ul.nice-menu-down li li {
  border-top: 0;
  width: auto;
  float: left;
}

ul.nice-menu-down ul {
  left: 0; /* LTR */
  margin: 0;
  text-align: left;
  float: left;
}

ul.nice-menu-down ul li {
/*  clear: both; */
  float: left;
  width: auto;
}

It works with this custom css:

ul.nice-menu {
  list-style: none;
  float: left;
  width: 100%;

  background: red;
}

ul.nice-menu-down {
  padding: 0
}

ul.nice-menu-down li {
  position:  relative;
  display: inline;
  float: left;

  background: black;
}

ul.nice-menu-down a {
  float: left;
  padding-right: 10px;
}


ul.nice-menu-down li ul {
  position: absolute;
  left: 0px;
  top: 18px;
  width: 700px;
  padding: 0;
  background: blue;
}

ul.nice-menu-down li ul li{
  display: inline;
  float: left;
  background: green;
}

ul.nice-menu-down li ul a {
  float: left;
}

Has anyone achieved this on version 6?

haggins' CSS code doesn't work.

I want to modify the CSS instead of modifying the module files.

Having not seen this issue, I just posted a reply on the Nice Menus horizontal children page.

The CSS that was on that page wouldn't work, so I added my own in the reply.

AFAIK, the problem with the alignment can only be solved by setting each menu's position to fixed, and aligning it relative to the whole page (which is what A List Apart does). mariusooms's suggestion didn't work for me, and I've found no combination of ul/li positioning that will achieve the desired effect. (Haggins' CSS code didn't solve this issue either.)

I still think this would be good to add to the module. You would have to make sure you mentioned the alignment problem in the documentation, of course - and probably in the CSS comments as well.

I would suggest "horizontal" or "parallel" for a style name, though - makes more sense than "downdown."

EDIT: I did think of a way left-alignment would work, but it's a major hack.

First, you would have to give an ID to each <li> tag, that represents which number list item it is (e.g. "item-1", "item-2", "item-3", etc.)

Then, for each ID, you would set the child list's left: attribute to a multiple of the (parent) list item's width, depending on which list item it is.

For example: Each list item is given a width of 100px. So, you would have classes like this:

ul.nice-menu-down li#item-1 ul {
  left: 0px;
}

ul.nice-menu-down li#item-2 ul {
  left: -100px;
}

ul.nice-menu-down li#item-3 ul {
  left: -200px;
}

(...etc)

Like I said, this is a hack - you would have to give each item number its own CSS rule, even if you have a hundred items. It would also require re-writing the output of every single <li> tag in the menu hierarchy, thus would have to be handled by a patch to nice_menus.module.

I have no idea if this is a good idea, just putting in my two cents.

Okay, I thought I'd put this in a reply, rather than edit my post YET AGAIN. (Besides, that idea might be good for something down the road...?)

I found the culprit. In the nice_menus.css file (the one you're not supposed to edit), there's this bit of CSS:

ul.nice-menu li {
   position: relative;
 }

This must be OVERRIDDEN for horizontal menus to work:

/* override nice_menus.css */
ul.nice-menu-down li {
   position: static;
 }

If you are copying/modifying the CSS from the "-down" class, you also need to override the "clear" attribute on the list items. So, change:

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

...to:

ul.nice-menu-down ul li {
  clear: none;
}

That's it! No extra markup or classes needed!

I'm going to post this info on the Nice Menus horizontal children page as well.

EDIT: Found one other issue... When the cursor moves out from the parent list item, the child list isn't "stickied."

In other words: if you have a parent menu item at the right side of the menu, you roll over it and its child menu appears, floated left as you would expect. But if the list isn't long, it won't overlap the parent list item, so you'll need to move the mouse off of the parent menu item, hiding the child menu before you can click on anything.

In order to fix this, you MUST set the child menu to a fixed width, as well as the parent:

ul.nice-menu-down,
ul.nice-menu-down ul {
  width: 600px; /* So list will be parallel */
  float: left;
}

Since just about everyone does this anyway right now, I'm not sure it's too much of an issue, but it should be noted.

Moving this back to the correct version. Features only go into dev.

the down-down feature is in the dev version now or not ? because i'm using it with patch, and i would to update the module...so if the dev version provide down-down...i will go to update

@aiphes (#20): The status "needs work" would suggest that the code isn't yet ready for review (which would be "needs review"). Alternatively you might want ro check out the 'superfish' module.

Agreed, not a bad Idea, I'd love to see it go into being an option in something like #219512: Have selectable prepackaged styles

Without code, and a good way to implement this, right now, I'm saying 'won't fix' not because I think it's bad, just being realistic with priorities.

If you have a patch, by all means, reopen this.