Question

这是css 在这个css我有#menu作为主菜单UI的ID 我改变了显示特性，但没有任何预期的效果

/*Initialize*/

#menu
{
    list-style:none;
    padding:0;
    margin: 0;   
    width:100%;
    left:auto;
    background-color:Gray;
 }
 ul#menu li ul.sub-menu 
{
    position:absolute;
    clear:both;
    width:100%;
    height:100%;
    visibility:hidden;
    top: 30px; height:25px;  padding:5px;
    padding:0;
    margin:0;
    display:none;display: none;    
}

#menu li 
{   position:relative;
    display: table-cell;
    width:auto;
    display:block;
    font-weight:bold;
    background-color:Olive;
    list-style-type: none;
    text-align:center;
    float:left;
    line-height:30px;  
    list-style-type: none;
    display:  block;
    float: left;
}




   ul#menu ul.sub-menu li 
   {
    float:left;
    line-height:30px; 
    text-indent:0;
    margin:auto;
    position:absolute;
    list-style-type:none;
    clear:both;
    margin: 0;
    background-color: #666;
    border:none;
    display: table-cell;
    width:auto;
    display:block;
    float: none;
    }

ul#menu li:hover ul.sub-menu  
{
     visibility:visible;  clear:both; /*display:inline;*/ position: absolute; display:table-cell; 

}

    ul#menu li a
    {
        display:block;text-indent:0; text-decoration: none; padding:5px 25px 5px 10px; 
    }

ul#menu li ul.sub-menu li a 
{
    text-decoration: none;
    padding: 5px 10px 5px 10px;
    display:inline-block; 
}
  ul#menu li a:hover ul.sub-menu 
  {
     visibility :visible;
     text-indent:0;
     font-size:20px;
     height:100%;
     width:100%;
     background-color:red;
     text-decoration: none;
     display:block;
   }

子菜单不会完全显示在父菜单下我是CSS的新手，它是所有控件。指导我PLZ

Answer 1

您需要设置left和top属性

ul#menu li ul.sub-menu {
  position:absolute;
  clear:both;
  width:100%;
  height:100%;
  visibility:hidden;
  top: 100%;
  left: 0%; 
  height:25px;  
  padding:5px;
  padding:0;
  margin:0;
  display:none;    
}

子菜单未完全显示在父母菜单上

1 个答案: