css - 菜单调整到悬停 css 上的子元素

Question

好的，我在这里做错了什么，我希望主按钮在鼠标悬停时不调整为子元素，下拉菜单问题是主菜单上的按钮在悬停时调整为下拉宽度，我是菜鸟，很抱歉如果这是一个愚蠢的问题，我提前道歉，如果这个问题已经在其他地方得到了回答，我试图找到答案，但是找出如何把它放在一起比找出是什么弄乱了什么更容易这是 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

子元素应该是绝对定位的。否则，它只会拉伸(stretch)其周围的元素(在本例中为您的父菜单项)。