如果添加CSS子子菜单(Trying to add a CSS Sub Sub Menu)

我想让你知道，不然我开始，我一直在寻找所有的子子菜单的问题，我没有看到任何能帮助我已经奠定了代码。 我感谢所有帮助所有，任何人都可以给我。

所以，我想增加一个子子菜单，我想我已经想通了，但我不认为我很明白如何让孩子组合程序工作。 如果你可以看看的那部分代码而言，你将是我的“圣人名单。”

ETA：哦，是的，问题是，子子菜单不出去的权利和显示旁边它应该是从，这就是我想要它做底涂父。 我希望这是有道理的。

这里是小提琴预览- 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> 

同样，任何帮助都将创造奇迹。 谢谢您的考虑。 :)

Answer 1:

也可以使用这其中是嵌套菜单的一个简单的例子。（无限制）。 的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;
}

Answer 2:

三件事情可以帮助你。
首先在CSS选择使用“>”。
第二个使用该

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

导致将鼠标悬停在其“<LI>”父正在显示的UL块。
和第三人使用的CSS位置调整子菜单position.like此

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

文章来源: Trying to add a CSS Sub Sub Menu