HTML CSS導航子樣式錯誤

Question

我很難在Wordpress主題導航中放置下拉菜單。 當我將鼠標懸停在ul>上時，它們在導航欄附近沒有顯示，並且在屏幕的左上角附近。

我的CSS如下：

 #main-navigation {

    clear: both;
    float: left;
    font-size: 17px;
    margin-top: 30px;
    width: 938px;
}
#main-navigation > ul { width: 105%; margin-left:auto; margin-right:auto; }
#main-navigation > ul > li {}
#main-navigation > ul > li:hover { transparent; }
#main-navigation > ul > li:first-child { border: medium none; }
#main-navigation > ul > li > a {
    margin-right:20px;
    border-bottom: 2px solid #6a6a65;
    color: #181818;
    display: block;
    font-weight: bold;
    height: 48px;
    line-height: 48px;
    padding: 0 29px;
//    text-shadow: 0 1px 0 #AD581D;\
    text-transform:uppercase;

}
#main-navigation > ul > li:first-child > a {
    background: url("./assets/img/home.png") no-repeat scroll center 10px transparent;
 //   border: medium none;
color:#6a6a65;
border-bottom: 2px solid #6a6a65;
    overflow: hidden;
    padding: 0 25px;
    text-indent: -999px;
    width: 31px;
}

#main-navigation > ul > li:first-child > a:hover {
border-bottom: 2px solid #fa7d4c;

}
#main-navigation a:hover { text-decoration: none; border-bottom: 2px solid #fa7d4c;}
#main-navigation ul li:hover ul { display: block; }
#main-navigation ul ul {
    border-bottom: 1px solid #333333;
    display: none;
    left: 0;
    padding-top: 20px;
    position: absolute;
    top: 148px;
    white-space: nowrap;
    z-index: 1000;
    background: url("./assets/img/dd-arrow.png") 33px 10px no-repeat;
}
#main-navigation ul ul li {
    background: none repeat scroll 0 0 #3C3C3D;
    border-left: 1px solid #333333;
    border-right: 1px solid #333333;
    border-top: 1px solid #2C2C2C;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3), 0 1px 0 #444445 inset;
    float: none;
    font-size: 16px;
}
#main-navigation ul ul li:first-child {
    border-top: medium none;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, 0.3);
}
#main-navigation ul ul a {
    color: #FFF;
    display: block;
    height: 48px;
    line-height: 48px;
    padding: 0 29px;
    text-shadow: 0 1px 0 #2D2D2E;
}
#main-navigation ul ul a:hover { color: #ccc; }

非常感謝您的幫助，因為我花了很長時間尋找該錯誤，它使我感到沮喪。

謝謝一群人！

Answer 1

您需要從主導航中告訴孩子絕對位置，而不是通過defaut進行篩選，因為缺少HTML代碼，因此Iguess :)

 #main-navigation {
    position:relative; /* tells absolute child to take coordonates from here */
    clear: both;
    float: left;
    font-size: 17px;
    margin-top: 30px;
    width: 938px;
}