子菜單不顯示的onmouseover

Question

這裏是CSS 在這個CSS我有#menu作爲主菜單的ID的UI 我做出顯示properrty變化，但沒有任何預期的效果

/*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和它的所有control..guide我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;  
}