Hi Lee,

I got my acct started and downloaded Video 1 and 2 on the House Menu Configuration. I got the menu in there, but just having trouble with a weird indentation and another question. I'll paste the link to the page and css classes. Can you tell from here a) why the menu is indenting about 20 pixels or so    and b) how I can get the child-level menus expand on rollover or click? Did I not get far enough in the videos?

Thnks for you rhelp,

Marianne

http://harterdental.dnn.globalsites...fault.aspx

The css classes:

/* =====================================
    CSS STYLES FOR HouseMenu SkinObject
   =====================================
*/

/* Vertical Menu */
#HouseMenuNav
{
    /* menu wrapper div */
    border-top: solid 1px #339966;
    border-bottom: solid 1px #339966;
    margin-bottom: 10px;
}
#HouseMenuNav ul
{
    /* all submenu lists */
    padding: 0;
    margin: 0;
    list-style: disc url(../skin_bkgd_fixed/none) inside;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
}
#HouseMenuNav a
{
    /* all links within the menu wrapper */
}
#HouseMenuNav li
{
    /* all list items */ /* -- Border around each menu item -- */
    border-bottom: 1px solid #339966; /* added for opera browser to remove bullets on lists */
    list-style: none;
}
#HouseMenuNav li a:link, #HouseMenuNav li a:visited
{
    /* main colour of the menu */
    margin: 0;
    padding: 0;
    display: block;
    padding: 5px 5px 5px 0.5em;
    border-left: 1px solid #339966;
    border-right: 1px solid #339966;
    color: #cccc99;
    text-decoration: none; /* added for opera */
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 14px;
    font-weight: normal;
}
#HouseMenuNav li a:hover
{
    background-color: #004851;
    color: #cccc99;
}
#HouseMenuNav ul ul
{
    /* second level menu items */
    margin-left: 12px;
}
#HouseMenuNav ul ul li
{
    border-bottom: 1px solid #339966;
    margin: 0; /* remove the bullets from the sub menu */
    list-style: none;
}
#HouseMenuNav ul ul a:link, #HouseMenuNav ul ul a:visited
{
    color: #cccc99;
}
#HouseMenuNav ul ul a:hover
{
    background-color: #004851;
    color: #cccc99;
}

Hello,

Before I look at 1) you should know that the menus in the tutorials are all static. At the time I did not have any success with rollover menus that worked in all browsers successfully for the HouseMenu.

This tutorial How to create a pure CSS skin (video 7) demonstrates how to style the HouseMenu vertically with the submenus indented.

If you wish to have a CSS menu with sub menus that expand on rollover (like the solpartmenu) I would suggest you use the Snapsis menu rather than HouseMenu.

Thanks,

Thank you! I'll look into that.

BTW, can you tell by my css why I'm getting that indentation?

Ok, I went through the tutorial and went almost verbatim by the RedLeaf skin. But for some reason that left margin wouldn't leave until I put a padding="0" in the #HouseMenuNav class. You didn't have that. So now of course the submenus are still not indenting. Seems either they all indent or nothing.

What am I missing?

Here's my css again...

/* =====================================
CSS STYLES FOR HouseMenu SkinObject
=====================================
*/

/* Vertical Menu */
#HouseMenuNav
{
/* menu wrapper div */
border-top: solid 1px #339966;
border-bottom: solid 1px #339966;
margin-bottom: 10px;
padding: 0px;
}
#HouseMenuNav ul
/* all submenu lists */
{
padding: 0;
border: 0;
margin: 0;
list-style: none;
}
#HouseMenuNav a
{
/* all links within the menu wrapper */
}
#HouseMenuNav li
/* all list items */ /* -- Border around each menu item -- */
{
border-bottom: 1px solid #339966; /* added for opera browser to remove bullets on lists */
list-style: none;
}
#HouseMenuNav li a:link, #HouseMenuNav li a:visited
{
/* main colour of the menu */
margin: 0;
padding: 0;
display: block;
padding: 5px 5px 5px 0.5em;
color: #cccc99;
text-decoration: none; /* added for opera */
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 14px;
font-weight: normal;
}
#HouseMenuNav li a:hover
{
background-color: #004851;
color: #cccc99;
}
/* second level menu items */
#HouseMenuNav ul ul
{
margin-left: 12px;
}
#HouseMenuNav ul ul li
{
border-bottom: 1px solid #339966;
margin: 0;
list-style: none;
}
#HouseMenuNav ul ul a:link, #HouseMenuNav ul ul a:visited
{
color: #cccc99;
}
#HouseMenuNav ul ul a:hover
{
background-color: #004851;
color: #cccc99;
}

Here's the link to the current page with the House Menu:
http://harterdental.dnn.globalsites...fault.aspx

A quick check before I delve into the CSS - which version of the HouseMenu are you using, it changed slightly between versions. - For those tutorials I recommend you use v1.3.1 rather than the later 1.4.1beta

Thanks. Before I install and test that one, can you tell me if either one allows me to expand and collapsd the submenus?

Thx,

Marianne

Well, 1.3.1 you should stick with static menus. 1.4.1beta is supposed to work with rollover menus, but I have not tested this fully, as in the initial tests there were problems displaying correctly in IE7.

If you mean can the menu look like the TreeView menu, the answer is no.

Basically, with the house menu I would recommend you stick with static menus, if you want rollover menus I would use the Snapsis menu (there is a 35% discount available for subscribers - look in the subscribers section of the forum)

Thanks,