Trying to add a CSS Sub Sub Menu

问题

I want you to know before I get started that I have been looking at all of the sub sub menu questions and I didn't see anything that could help the code I already have laid out. I appreciate any help at all that anybody can give me.

So, I am trying to add a sub sub menu and I thought I had figured it out, but I don't think I quite understand how to get the child combinators to work. If you could take a look at that part of the code specifically, you would be on my 'saint list.'

ETA: Oh yeah, and the problem is that the sub sub menu does not go out to the right and show up next to the parent that it is supposed to be subbing from, which is what I want it to do. I hope that makes sense.

Here is the fiddle preview - http://jsfiddle.net/BVtSC/18/

And here is the 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;
}

Here is the 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>

Again, any help at all would do wonders. Thank you for your consideration. :)

回答1:

or you can use this which is a simple example of nested menu.(unlimited). jsfiddle
you should just adjust its size and color.

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

回答2:

three things can help you.
first using '>' in css selectors.
second using this

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

that cause a ul block being displayed when you hover on its '< li >' parent.
and third one is using css positions to adjust submenus position.like this

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

来源：https://stackoverflow.com/questions/15938038/trying-to-add-a-css-sub-sub-menu

标签

css

parent-child

submenu