Question

我很难在我的Wordpress主题导航中定位下拉菜单。当我将鼠标悬停在ul li＆gt;上时，它们不会出现在导航栏附近的位置，并且靠近屏幕的左上角。

我的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告诉孩子绝对位置而不是defaut，Iguess，因为HTML代码丢失了：）

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

HTML CSS导航子样式错误

1 个答案: