菜單調整到子元素懸停css

Question

好的我在這裏做錯了什麼我想要主鍵不要調整到鼠標懸停的子元素，並與我的下拉菜單問題是主菜單上的按鈕resise到下拉如果這是一個愚蠢的問題，我提前道歉，如果這已經在其他地方已經回答了其他地方試圖找到答案，但它的easyer發現如何把它放在一起比發現什麼是搞亂什麼 繼承人的CSS;

 #menu 
    { 
    position:relative; 
    top:100px; 
    height:50px; 
    width:1000px; 

} 
#menu ul { 
    height:30px; 
margin-left: 0px; 
padding:0; 
    } 
#menu ul li { 
    height:30px; 
    list-style:none; 
    float:right; 
    padding-right:0px; 
    margin:0; 
    } 
#menu ul li a { 
height:30px; 
padding:0 15px 0 15px; 
text-shadow: none; 
line-height:30px; 
    color:#fff; 
    text-decoration:none; 
    font-size:17px; 
    font-weight:normal; 
    } 
#menu ul li.active { 
    height:30px; 
    margin:0px 5px 0px 5px; 
     } 
#menu ul li.active a{ 
margin:5px 5px 5px 5px; 
    height:30px; 
    color:#880000; 
    text-shadow:#000; 
    background:#000044; 
    -moz-border-radius: 5px; border-radius: 5px; webkit-radius: 5px; 
} 
#menu ul li.active a, #menu ul li a:hover { 
    margin:0px 0px 0px 0px; 
    height:30px; 
    color:#880000; 
    text-shadow:#000; 
    -moz-border-radius: 5px; border-radius: 5px; webkit-radius: 5px; 

    } 

     #menu ul li:hover { 
margin:0px 0px 0px 0px; 
    -moz-border-radius: 5px; border-radius: 5px; webkit-radius: 5px; 
} 

子元素

#menu ul li ul { 
    display: none; 
    width:180px; 
    left:-999em; 
    border-top:0; 
    margin:0px; 
     padding:0; 
     -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px; 

     } 
       #menu ul li:hover ul, #menu ul li.sfHover ul 
       { 
      display: block; 
      position:relative; 
      top:4px; 
      left:-0px; 
       z-index:6; 
       background-color:#444444; 
     -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px; 
        } 
      #menu ul li ul li { 
     padding: 0; 
     height:auto; 
    width:180px; 
    margin:0px; 
    border:none; 
    -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px; 
    } 
    #menu ul li ul li a:hover ul { 
color:880000; 
background-color:#444444; 
-moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px; 
} 
    #menu ul li:hover ul li a { 
background-color:#444444; 
    text-shadow:none; 
    -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px; 
    } 
    #menu ul li:hover ul li { 
background-color:#444444; 
    -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px; 
      } 
     #menu ul li:hover ul li a, #menu ul li ul li a, #menu ul li.active ul li a 
      { 
     margin:0px; 
      padding:0px 5px 0px 5px; 
      height:24px; 
      line-height:24px; 
      background:#555; 
      border-bottom:1px solid #3a3a3a; 
      color:#ffffff; 
      background-color:#444444; 
      font-size:12px; 
      font-weight:normal; 
      text-shadow:none; 
      -moz-border-radius: 0px; border-radius: 0px; webkit-radius: 0px; 
       } 
      #menu ul li ul li a:hover, #menu ul li ul li.active a, #menu ul li.active  ul li a:hover,#menu ul li.active ul li.active a { 
      line-height:24px; 
      background:#343434; 
      color:#880000; 
      font-size:12px; 
      text-shadow:#000; 
      } 
      #menu ul li ul ul, #menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul, #menu ul li.sfHover ul ul, #menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul 
      a{ 
     display:none; 
      } 
      #menu ul li ul li ul li{ 
      height:24; 
     width:180px; 
     border:none; 
     text-align: left; 
      left:180px;} 

      #menu ul li ul ul, #menu ul li:hover ul ul, #menu ul li:hover ul ul ul, #menu ul li:hover ul ul ul ul, #menu ul li.sfHover ul ul, #menu ul li.sfHover ul ul ul, #menu ul li.sfHover ul ul ul ul:hover 
       { 
        } 
        #menu ul li ul li ul li 
        { 
         height:24; 
         width:180px; 
         border:none; 
        text-align: left; 
        left:180px; 
       } 

請記住它尚未完成我還要添加樣式老二菜單 由於事先

Answer 1

子元素應該是絕對定位。否則，它只會擴展其周圍的元素（在這種情況下，您的父菜單項）。