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

子元素应该绝对定位。否则，它只会拉伸其周围的元素（在这种情况下，是您的父菜单项）。

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

1 个答案: