Orchard CMS＆amp; Contoso子菜单项

Question

Orchard CMS版本 1.7.2 ， Contoso 是当前主题。

导航区中的主菜单。

已创建四个菜单项：新闻，子菜单-1，子菜单-2和关于

现在我想将菜单结构设为子菜单-1，子菜单-2是新闻的子菜单。

在Orchard Navigation部分，我将子菜单-1和子菜单-2拖到新闻中，见下图：

但实际上，菜单导航如下所示：

我从这里拍摄了大部分问题和图像How to config submenus in Orchard CMS(v1.6) using contoso theme?，但这个家伙没有留下答案，我已经向他伸出手但却没有收到回复。我知道我必须根据最后的答案修改CSS，但我不知道在哪里。我一直在这个墙上撞墙。

感谢任何帮助。

Answer 1

这些是您需要复制并适应的主题机器的样式：

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; }

Answer 2

如果以后稍微节省了一些时间，这是我的确切css，可以很好地发布在contoso的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; }