Orchard CMS & Contoso Sub Menu Item

Question

Orchard CMS version is 1.7.2, and Contoso is current theme.

Main Menu in Navigation zone.

Four menu items have been created: News, submeun-1, submenu-2 and About

Now I want to make menu structure as submenu-1 and submenu-2 are submenus of News.

In Orchard Navigation section I have drag submenu-1 and submenu-2 into News, see pic below:

But actually, the menus navigation looks like below:

I took most of the question and images from here How to config submenus in Orchard CMS(v1.6) using contoso theme? but the guy did not leave the answer and I have reached out to him but did not hear back yet. I know I have to modify the css based on the last answer but I am not sure where. I have been beating my head against the wall on this one.

Any help is appreciated.

Answer 1

In case it saves someone a little bit of time later, here is my exact css that works nicely to post at the end of contoso's Site.css.

nav ul 
{
    padding: 0px;
    margin: 0px;
}

nav ul li
{
    background:#f6f6f6;
    display:block;
    margin:0 2px -1px 0;
}

nav > ul li.current 
{
    border-bottom: 1px solid #fff;
    background:#85b35c;
}

nav ul li a 
{
    padding:0 18px;
    display:block;
    color: #333;
    font-size: 1.077em;
    text-decoration:none;
    line-height:24px;
}


/* first level */
nav > ul > li { float:left; }
nav > ul > li > a { float:left; }
nav > ul > li:hover > ul { display:block; }
nav > ul > li:hover { }

/* second level */
nav > ul > li > ul { margin: 40px 0px 0px -1px; padding:0px; display:none; position:absolute; border: 1px solid #dbdbdb; background-color: #646660;}
nav > ul > li > ul > li { list-style-type:none; margin:0px; border: none;}
nav > ul > li > ul > li > a { display:block; text-decoration:none;}
nav > ul > li > ul > li:hover > a { }

nav > ul > li > ul > li:hover > ul { display:block; }

/* third level */
nav > ul > li > ul > li > ul { margin: -20px -1px 0px 90% ; padding:0px; display:none; position:absolute; border: 1px solid #dbdbdb; }
nav > ul > li > ul > li > ul > li { list-style-type:none; margin:0px; border: none;}
nav > ul > li > ul > li > ul > li > a { display:block; text-decoration:none;}
nav > ul > li > ul > li > ul > li:hover > a { }

/* deeper levels */
nav > ul > li > ul > li > ul ul { display:none; }

Answer 2

These are the styles from the theme machine that you need to copy over and adapt:

nav ul 
{
    padding: 0px;
    margin: 0px;
}

    nav ul li
    {
        border:1px solid #dbdbdb;
        background:#f6f6f6;
        display:block;
        margin:0 2px -1px 0;
    }
    nav > ul li.current 
    {
        border-bottom: 1px solid #fff;
        background:#fff;
    }
    nav ul li a 
    {
        padding:0 18px;
        display:block;
        color: #333;
        font-size: 1.077em;
        text-decoration:none;
        line-height:24px;
    }


/* first level */
nav > ul > li { float:left; }
nav > ul > li > a { float:left; }
nav > ul > li:hover > ul { display:block; }
nav > ul > li:hover { }

/* second level */
nav > ul > li > ul { margin: 24px 0px 0px -1px; padding:0px; display:none; position:absolute; border: 1px solid #dbdbdb;}
nav > ul > li > ul > li { list-style-type:none; margin:0px; border: none;}
nav > ul > li > ul > li > a { display:block; text-decoration:none;}
nav > ul > li > ul > li:hover > a { }

nav > ul > li > ul > li:hover > ul { display:block; }

/* third level */
nav > ul > li > ul > li > ul { margin: -20px -1px 0px 90% ; padding:0px; display:none; position:absolute; border: 1px solid #dbdbdb; }
nav > ul > li > ul > li > ul > li { list-style-type:none; margin:0px; border: none;}
nav > ul > li > ul > li > ul > li > a { display:block; text-decoration:none;}
nav > ul > li > ul > li > ul > li:hover > a { }

/* deeper levels */
nav > ul > li > ul > li > ul ul { display:none; }