css - 纯 CSS 子下拉菜单

Question

我正在尝试创建一个包含 3 个子菜单的菜单，我已经成功创建了前 2 个。我的问题是第三个下拉菜单，它只显示一个 <li>当有多个可用时。

CSS

   /*Reset */
html, body, h1, h2, h3, h4, h5, h6, form, input, ul, ol, p, fieldset, header, footer, section, aside, nav, article, figure  { display:block; padding: 0; margin: 0; }

/* Main CSS */
html, body,#wrapper{

    width:990px;
    height:100%;
    min-height:100%;
    margin: 0 auto;
}

#wrapper{
    position: absolute;
}
#header{
    position:relative z-index:500;
    background:url('../images/header.png');
    width:990px;
    height:220px;
}

/*Menu */
nav{
    float:left;
    width:190px;
    margin:0px 0 0 40px;
}

nav ul{
    float:left;
    margin:0;
    list-style:none;
    font-size:14px;
    width:190px;
}

nav ul li{
    display:block;
    position:relative;
}

nav ul li ul{
    display:none;
}

nav ul li ul li ul li{
    display:none;
}

nav ul li:hover ul{
    display: block;
    position:absolute;
    left:190px;
    top:0px;
}

nav ul li ul li:hover li{ /* edit page drop down */
    display:block;
    position:absolute;
    left:0px;
    top:0px;
}


nav li a{
    font-size:14px;
    color:#fff;
    line-height:25px; /*Text Hight On Button */
    text-decoration:none;
    text-indent:25px;
    display:block;
    margin-left:-40px;
    width:190px;
    height:27px;
    background-image:url('../images/normal.png');
}

nav a:hover{
    background-image:url('../images/onclick.png');
}

/*Content */

#content{
    margin: 0 0 0 190px;
    width:815px;
    height:95%;
}

#content h1{
    margin: 5px 0 0 10px;
    font-family: 'Josefin Slab', arial, serif;
    font-size:24px;
}

#content p{
    margin:0 0 0 15px;
}

#content li{
    margin:0 0 0 35px;
}

.clear{
    clear:both;
    margin:0;
    padding:0;
}

footer{
    float:left;
    display:block;
    clear:both;
    overflow:hidden;;
    bottom:0;
    background:url('../images/footer.png') no-repeat #000;
    width:100%;
    height:20px;
}

#leftCol{
    float:left;
    width:190px;
    height:100%;
    background:url('../images/metalnavbg.png');
    margin-bottom:0px;
}

/* Misc*/
/* Text Formatting */

#companyName{
    text-align:center;
    padding-top:45px;
    font-size:35px;
    color:#f0f0ef;
}

#companyQuote{
    text-align:center;
    font-size:18px;
    color:#a5a4a2;
}

/*Forms */

/*General*/

#validation{
    font-weight:bold;
    color:#ff0101;
}
.contactForm{
    width: 450px;
    height:425px;
    padding: 35px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;
}

#validation{
    font-weight:bold;
    color:#ff0101;
}

.form{
    width: 400px;
    height:100%;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

.borderradius.form{
    width: 400px;
    height:100%;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;
}

fieldset{
    border:none;
}

#formLayout{
    border:2px solid #000;
}

#formLayout label{
   clear:  both;
    display: block;
}

#formLayout input{
    font-size:12px;
    border: 2px solid #999;
    padding: 6px 8px;
    background-color: #fff;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -webkit-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0px 2px 2px rgba(0,0,0,0.2);
    color: #000;
    width: 250px;
}



#formLayout .small{
    color:#ff0101;
    display:block;
    font-size:11px;
    font-weight:bold;
    text-align:left;
    width:140px;
}

#formLayout textarea{
    width:250px;
}

#error{

    width:250px;
    height:20px;
    margin:-30px 0 0 270px;
    padding-bottom:10px;
}

#error p{
    color:#ff0101;
    text-align:left;
}

/* Specific Form Class's */

.login{
    width: 470px;
    height:250px;
    padding: 15px 25px;
    margin: 0 auto 10px;
    color: #000;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;

}

.login label{
    font-weight:bold;
}
.login .loginSubmit{
        margin-top:25px;
}
/*Gallery CSS */


#gallery{
    width:120px;
    margin-left:5px;
    display: inline;
}

#gallery .thumbnail{
    margin:0 auto;
    display:inline;
} 

#gallery img{
    margin:5px;
}

#sales{
    width:190px;
    height:195px;
    margin-left:15px;
    display:inline-block;
    border: 1px solid red;
}


#sales .location{
    float:left;
    text-align:center;
    font-weight:bold;
    margin-left:15px;
}

#sales .price{
    float:left;
    text-align:left;
    font-weight:bold;
    padding-left:5px;
    color:#ff0101;
}

#deleteImage{
    float:left;
    margin-left:25px;
    width:100px;
    height:100px;
}

#deleteImage .thumbnail{
    margin:0 auto;
    height:90px;
    width:90px;
}

Answer 1

nav ul li ul li:hover li{
    display:block;
    position:absolute; /* <--- it's right here */
    left:0px;
    top:0px;
}

发现问题。您正在设置第 3 组 <li>将元素绝对化，然后将它们强制放入封闭的左上角 <ul>对于那个列表。您可能正在寻找这样的东西:

nav ul li ul li:hover ul{/* reference the ul instead of the contained <li>s */
    display:block;
    position:absolute;
    left:0px;
    top:0px;