尝试添加CSS子菜单

Question

在开始之前，我希望你知道我已经查看了所有的子菜单问题，但没有看到任何可以帮助我已经布置好的代码的内容。非常感谢任何人能够给我任何帮助。

所以，我正在尝试添加一个子子菜单，我认为我已经想出来了，但我不太明白如何让子组合器起作用。如果您可以专门查看代码的这一部分，那么您将被列入我的“圣人名单”中。

预计完成时间：哦，是的，问题是子子菜单不能向右展开并显示在它应该从中派生的父元素旁边，这正是我想要的。我希望这样说得清楚。

这里是fiddle预览 - http://jsfiddle.net/BVtSC/18/

这是CSS：

/*------------------------- Header ---------------------------*/
 #header {
 background: #333 url(../images/bg-header2.png) repeat-x;
 height:184px;
 margin:15px 0 0;
}
#header div {
margin:0 auto;
padding:28px 0 0;
position:relative;
width:500px;
}
#header div ul {
height:118px;
left:10px;
list-style:none;
margin:0;
overflow:visible;
padding:0;
position:absolute;
top:10px;
float: left;
width: 500px;
}
#header div ul li:first-child {
margin:0;
}
#header div ul li {
float:left;
height:66px;
margin:0 0 0 65px;
text-align:left;
position:relative;
}
#header div ul li a {
color:#fff;
font-family:oswaldregular;
font-size:16px;
line-height:24px;
text-decoration:none;
text-transform:uppercase;
}
#header div ul li.selected a, #header div ul li a:hover {
color:#DD2D00;
}
#header div ul li ul {
height:1000px;
left:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: left;
}
#header div ul li:hover ul {
left:0;
top:37px;
}
#header div ul li ul li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#header div ul li ul li:hover {
background:none #DD2D00;
}
#header div ul li ul li:hover {
left:0;
top:0;
}
#header div ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:28px;
text-transform:none;
}
#header div ul li ul li.selected a, #header div ul li ul li a:hover {
color:#fff!important;
}
#header div ul li ul li ul {
height:1000px;
right:-99999px;
overflow:visible;
position:absolute;
top:37px;
width:115px;
float: right;
}
#header div ul li ul li:hover ul {
left:0;
top:37px;
}
#header div ul li ul li ul li {
background:none #343434;
border:1px solid #4f4f4f;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#header div ul li ul li ul li:hover {
background:none #DD2D00;
}
#header div ul li ul li ul li:hover {
left:0;
top:0;
}
#header div ul li ul li ul li a {
color:#ffffff!important;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:28px;
text-transform:none;
}
#header div ul li ul li ul li.selected a, #header div ul li ul li ul li a:hover {
color:#fff!important;
} 

这里是HTML代码：

<div id="header">
<div>   

    <ul>
        <li>    <a href="index.html">Home</a>

        </li>
        <li>    <a href="about.html">About</a>

        </li>

        <li class="selected">   <a href="portfolio.html">Portfolio</a>

            <ul>
                <li>    <a href="fantasy.html">Fantasy</a>

                </li>
                <li>    <a href="makeup.html">Makeup</a>

                    <ul>
                        <li><a href="glamour.html">Glamour Makeup</a>
                        </li>
                        <li><a href="sfxmakeup.html">Special Effects Makeup</a>
                        </li>
                    </ul>
                </li>
                <li>    <a href="boudoir.html">Boudoir</a>

                </li>
                <li>    <a href="babykids.html">Baby & Kids</a>

                    <ul>
                        <li><a href="baby.html">Baby</li>
                        <li><a href="baby.html">Kids</li>  </ul>
                    </li>
                    <li>
                        <a href="family.html">Family</a>

                            <ul>
                                <li><a href="couples.html">Couples</li>
                        <li><a href="mombaby.html">Mother/Baby</li>
                        <li><a href="momchild.html">Mother/Child</li>
                        <li><a href="fatherchild.html">Father/Child</li>
                        </ul>
                    </li>
                    <li>
                        <a href="pets.html">Pets</a>

                                </li>
                                <li>    <a href="portrait.html">Portrait</a>

                                </li>
                                    </ul>
                        </li>

                        <li>    <a href="contact.html">Contact</a>

                        </li>
                    </ul>
</div>
</div> 

再次感谢您的帮助。任何帮助都将起到奇妙的作用。谢谢您的考虑。 :)

- AceofHearts

Answer 1

以下是三个有助于你的技巧。
第一，使用CSS选择器中的'>'符号。
第二，使用this关键字。

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

导致在悬停其“<li>”父元素时，一个“ul”块被显示的原因有两个。第三种方法是使用CSS位置来调整子菜单的位置。就像这样：

#header > ul{
    position:relative;
}
li{
    position:relative;
}
ul ul{
    position:absolute;
    left:120px;
    top:0;
}

- ncm

---

非常感谢您的回答。display:none和display:block的效果非常完美，但是我无法弄明白怎样使它向右移动。无论我做什么，它都停留在父级子菜单后面。这是链接http://jsfiddle.net/BVtSC/47/。如果您有时间看一下，帮我找出问题所在，我将非常感激。我真的卡住了。我尝试了您底部提到的position属性，但是它完全破坏了格式。再次感谢您迄今为止的帮助，期待您可能给予的进一步帮助。:) - undefined

大家在这里互相支持，一个人回答问题，另一个人给答案和有用评论点赞。(: 我在我的代码中搜索了一下，想找到一个类似的代码来发布在这里，但是没有找到任何东西。我会尽量找到或编写一个，但是我觉得可能会晚了。所以给你一些建议。试着从头开始编写你的代码，并尝试使用 li > ul 而不是 li ul。对于通常的事情，只使用 li ul。还要试着理解代码的每个部分是做什么的，以及它的作用是什么。(-: - undefined

非常感谢imsiso。我同意你在底部所说的关于理解代码的每个部分，我确实一直在努力做到这一点。Stack Overflow对我的代码学习帮助很大。如果你能找到或编写代码来帮助解决我的问题，并且不会太麻烦，对我来说永远都不会太晚。谢谢你对他人提供的帮助之多。今天我终于获得了足够的声望来投票支持答案，我肯定投了你的一票。:) - undefined

Answer 2

或者您可以使用这个简单的嵌套菜单示例（无限制）。jsfiddle
您只需要调整它的大小和颜色。

HTML

<ul class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a>
        <ul>
            <li><a href="#">sub item1</a></li>
            <li><a href="#">sub item2</a></li>
            <li><a href="#">sub item3</a>
                <ul>
                    <li><a href="#">sub sub item 1</a></li>
                    <li><a href="#">sub sub item 2</a>
                        <ul>
                            <li><a href="">sub sub sub item1</a></li>
                            <li><a href="">sub sub sub item2</a></li>
                            <li><a href="">sub sub sub item3</a>
                                <ul>
                                    <li><a href="">yes why not?</a></li>
                                    <li><a href="">you can still continue</a></li>
                                    <li><a href="">if you want</a></li>
                                    <li><a href="">you can try.(-;</a></li>
                                </ul>
                            </li>
                            <li><a href="">sub sub sub item4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">sub sub item 3</a></li>
                </ul>
            </li>
            <li><a href="#">sub item4</a></li>
        </ul>
    </li>
    <li><a href="#">item3</a></li>
</ul>

CSS

ul.menu{
    position:relative;
}


ul.menu li{
    padding:0;
    margin:0;
    position:relative;
    border:1px solid;
}

ul.menu > li{
    float:left;
    padding:10px 45px;
}

ul.menu > li li{
    padding:7px;
}

ul.menu , ul.menu ul{
    list-style:none;
    padding:5px;
    margin:0;
    overflow:visible;
}

ul.menu li:hover > ul{
    display:block;
}

ul.menu ul{
    display:none;
    position:absolute;
    left:-6px;
    top:37px;
    width:160px;
}

ul.menu ul:hover{
    display:block;
}

ul.menu ul ul{
    left:158px;
    top:0;
}

- Sina R.

---

耶！！！我给你一个巨大的虚拟拥抱。你帮助我解决了问题。我无法告诉你我有多么感激你的帮助。我已经在所有平台上给予你声望并接受了你的答案。你也被宣布为AceofHearts教堂的圣人！ - undefined