使用nth-child属性将嵌套元素与div的顶部对齐

Question

我需要指定.dropdown .has-panel ul .dd-panel:nth-child(2)个不同的top:x值，但似乎我的n-child工作不正确，因为我可能做错了。

提示样本http://jsfiddle.net/Ed9nk/4/

我需要将Level 3/ Grand Child菜单放在容器顶部，例如level 2 /Child菜单，以便相应的level3 me菜单始终显示在顶部。

我添加了以下css

/* has set top: -64px; manually so that Parent One > Child Menu> Grand Child align to top*/    
.dropdown ul ul .dd-panel {
        background: none repeat scroll 0 0 red;
        border-left: 0px solid #30a784;
        border-right: 0px solid #008438;
        bottom: 0;
        display: none;
        font-size: 11px;
        height: 100%;
        left: 175px;
        line-height: 15px;
        min-height: 100px;
        padding: 10px;
        position: absolute;
        text-align: justify;
        top: -64px;
        width: 400px;

    }
    .dropdown .has-panel ul .dd-panel:nth-child(2)
    {
    top: -64px;
    background-color:green;
    }
    .dropdown .has-panel ul .dd-panel:nth-child(4)
    {
    top: -164px;
    background-color:yellow !important;
    }

我的简单问题是我总是想要Image＆amp;与第2级或第3级菜单相关的文本显示为顶部，我尝试了很多东西但是如果想与nth-child合作但最终没有任何工作，但我不能正确地将它弄好，可能会混淆元素。

Answer 1

根据您在问题中添加的图片，我将提供解决方案。像下面一样更新你的CSS。

 ul.nav > li > .dropdown.has-panel li:nth-child(3) > .dropdown.has-panel .dd-panel
{
  margin-top: -90px;
  background-color:green !important;
 }

DEMO