如果添加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; 
}