html - 第二个嵌套菜单出现问题

Question

我在向第一个下拉菜单添加子菜单时遇到问题。基本上这是我想要的结构:

<ul id="nav" class="sixteen columns">
<li><a href="index.html">Home</a></li>
            <li><a href="#">Portfolio</a>

                <ul>
                    <li><a href="asia.html">Asia</a>

                        <ul>
                            <li>Korea</li>
                            <li>China</li>
                            <li>Japan</li>
                        </ul>


                    </li>
                    <li><a href="europe.html">Europe</a>

                            <ul>
                                   <li>France</li>
                                   <li>Germany</li>
                                   <li>Italy</li>
                            </ul>

                    </li>

                </ul>


            </li>
</ul>

这是我正在使用的 CSS:

#nav {
font-family: lanenar;
font-size: 1.2em;
z-index: 999;
position: relative;
}

#nav ul ul {
display: none;
}

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

#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-block;
background: #111;
}

#nav ul li {
float: left;
}

#nav ul li a {
padding: 5px 10px 5px 10px;
display: block;
color: #FFF;
text-decoration: none;
}

#nav ul li:hover {
background: #666;
}

#nav ul li:hover a {
color: #FFF;
}

#nav ul li:hover > ul { margin: 0px; padding: 0px;}
#nav ul li:hover > ul li { float: none; display: block;}
#nav ul li:hover > ul li a { color: #FFF; min-width: 150px;}
#nav ul li:hover > ul li a:hover {color: #FFF;}


#nav ul li {
position: relative;
}

#nav ul li ul {
position: absolute;
top: 28px;
left: 0px;
}

当您将鼠标悬停在亚洲或欧洲时，我很难弄清楚我需要添加什么 CSS 才能使第二个嵌套菜单显示在右侧？

如有任何帮助，我们将不胜感激!

Answer 1

HTML

<ul id="nav" class="sixteen columns">
    <li><a href="index.html">Home</a>

    </li>
    <li><a href="#">Portfolio</a>

        <ul>
            <li><a href="asia.html">Asia</a>

                <ul>
                    <li><a href="#">Korea</a></li>
                    <li><a href="#">China</a></li>
                    <li><a href="#">Japan</a></li>
                </ul>
            </li>
            <li><a href="europe.html">Europe</a>

                <ul>
                    <li><a href="#">France</a></li>
                    <li><a href="#">Germany</a></li>
                    <li><a href="#">Italy</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

    #nav {
    width:800px;
    margin:30px 50px;
    padding: 0;
    float:left;
}
#nav li {
    list-style: none;
    float: left;
    padding:0 10px;
    background-color:#367FB3;
    color:white;
}
#nav li a:hover {
    background-color:#52baff;
    color:#fff;
}
//daf adf
/*--temp--*/
 #nav ul ul li {
    clear:left;
}
#nav ul ul {
    position:absolute;
    left:14em;
    top:0;
}
#nav ul ul li a {
    display:block;
    padding: 3px 15px;
    color: #242424;
    text-decoration: none;
    font-size:13px;
    font-family:"Lato" !important;
}
/*--end temp--*/
 #nav li a {
    display: block;
    padding: 3px 15px;
    color: #242424;
    text-decoration: none;
    font-size:13px;
    font-family:"Lato" !important;
}
#nav a:hover {
    color:#367FB3;
}
#nav a:active {
    color:#367FB3;
}
#nav li ul {
    display: none;
    width: 14em;
    /* Width to help Opera out */
    background-color:transparent;
    z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
    display: block;
    position: absolute;
    margin:0px -10px;
    padding:0px;
}
#nav li:hover ul ul {
    display:none;
}
#nav li ul li:hover ul {
    display:block
}
#nav li:hover li, #nav li.hover li {
    float: none;
    line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
    background-color:#367FB3;
    color:#fff;
    font-size:13px;
    font-family:"Lato" !important;
}
#nav li li a:hover {
    background-color:#52baff;
    color:#fff;
}

Working Fiddle

根据 SurjithSM 将其添加到更新的 fiddle 中建议

#nav li {
        position: relative;
}

Updated Fiddle