在开始之前，我想让您知道，我一直在查看所有子菜单问题，但没有看到任何可以帮助我已经布置的代码的东西。我很感激任何人能给我的任何帮助。
所以，我正在尝试添加一个子子菜单，我以为我已经弄清楚了，但我认为我不太了解如何让子组合器工作。如果您可以专门查看代码的那部分，那么您将在我的“圣人名单”上。
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>
同样，任何帮助都会产生奇迹。谢谢您的考虑。:)