Question

我想让你知道，在我开始之前，我一直在查看所有子子菜单问题，但我没有看到任何可以帮助我已经列出的代码的东西。我感谢任何人都能给我的任何帮助。

所以，我正在尝试添加一个子子菜单，我想我已经弄明白了，但我不认为我完全理解如何让儿童组合器工作。如果您可以专门查看代码的这一部分，那么您将会出现在我的“圣名单上”。

ETA：哦，是的，问题是子子菜单没有向右移出并显示在它应该从哪个父级旁边，这就是我想要它做的。我希望这是有道理的。

这是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

三件事可以帮到你。
首先使用'＆gt;'在css选择器中。
第二次使用此

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

当你将鼠标悬停在'＆lt;'上时会导致显示ul块li＆gt;'家长。
第三个是使用CSS位置来调整子菜单位置。就像这个

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

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

尝试添加CSS子子菜单

2 个答案: