Hi,

I've been searching high and low for a tutorial or at least some hints on how to create a horizontal submenu. Mouseover the mainmenu and the submenu displays horizontally underneath.

Thanks very much for your help

Leif

I've been having the same problem, but the only place that I cant get  the menu to work is ie quirks mode.

Every other browser is fine the submenus are displayed when I hover, but in ie nothing happens.

Housemenu can display the second-level lists horizontally. Here is some example presentation CSS that works with the House of Nuke website CSS Tim posted. 

If you set the li ul width to some number wider than the widest computer screen, then the second-level background bar will extend from the list entry to the right of the screen, but there will momentarily be a scroll bar when the second-level list is active. Or you can use a seperately configured fixed bar under the second level list. I am sure more could be done to change the positioning and spacing of the horizontal sub menu, but these two options work with a minumum of changes to Tims CSS.

The spacing below is in em, so make sure you have the font size specified as a percentage in the body. The third level menu and a few other odds and ends are left over from other configurations and not meant to be used. I tested this in IE6, IE7, FF2, Opera 9.5 and Safari on PC (but not in your skin! :-).

Hope this helps,

Kirk

/*******************************************************
 Presentation CSS that typically needs to be customized
*******************************************************/

#HouseMenuNav, #HouseMenuNav ul { /* all submenu lists */
    width: 100%;
    background-color: #369;a
    float: left;
    line-height: 1.25;
}

#HouseMenuNav li { /* all list items */
    /* hack for MacIE5 to ignore, while other browsers use \*/
    width: auto;
    _width: 1px;
    /* end hack */
}

#HouseMenuNav li li { /* all items under the top level */
    height: auto;
}

#HouseMenuNav a { /* all links within the menu wrapper */
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: .7em;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background-color: transparent;
    height: auto;
    width: auto;
    padding: 0 1em;
}

#HouseMenuNav li li a { /* all item links under the top level */
        padding: 0 1em 0 1em;
}

#HouseMenuNav li a:hover {
    color: #036;
    background-color: #9cf;
    height: auto;
    padding: 0 1em;
}

#HouseMenuNav li li a:hover {
    color: #036;
    background-color: #9cf;
    height: auto;
        padding: 0 1em 0 1em;
}

#HouseMenuNav li ul { /* second-level lists */
    width: 20em;
    float: left;
    /* hack for MacIE5 to ignore, while other browsers use \*/
    margin: 0;
    /* end hack */
    line-height: 1.25;
    background-color: #69c;
    height: auto;

    left: -999em;
    font-weight: normal;
}

#HouseMenuNav li ul ul { /* third-and-above-level lists */
    background-color: #69c;
    line-height: 1.25;
    margin: -1.75em 0 0 14em;
}

/* Applied to the parent item, if displayed, in either vertical or horizontal
   orientation. Must follow other styles. */
#HouseMenuNav #houseMenuParentItem a
{ /* all links under the parent item (li) */
    background-color: transparent;
    text-decoration: none;
}

#HouseMenuNav a#houseMenuParentLink
{ /* parent link itself */
    background-color: transparent;
    text-decoration: none;
}

#HouseMenuNav a#houseMenuCurrentLink
{ /* current link itself */
    padding: 5px;
    color: #fff;
    background-color: #036;
    text-decoration: none;
}

Thanks very much for your replies. I'll give those ideas a try.

Cheers

Leif

The hover works for me exactly like it does on houseofnuke.com.

Does the House of Nuke website CSS posted by Tim work the same in your skin as it does on houseofnuke.com?:

http://houseofnuke.com/Forums/tabid/411/view/topic/forumid/1/postid/27/Default.aspx