如果添加CSS子子菜单

Question

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

所以，我尝试添加子子菜单，我想我已经想通了，但我不认为我很明白如何让孩子组合程序工作。如果您可以专门查看代码的这一部分，那么您将在我的“圣人”列表中。

ETA：哦，是的，问题是，子子菜单不会出现在右边，并显示在父母旁边，它应该是sublay从，这是我想要它做的。我希望这是有道理的。

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

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

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