html - 改变 LI 元素的文本颜色

Question

我有一个 CSS 菜单，我在排序方面得到了一些帮助，它几乎可以正常工作。

我只是希望能够更改 LI 悬停时的文本颜色，而且子菜单本应位于正下方，但似乎更向右显示

CSS:

.menu-my-integra-container {
    border:1px solid black;
    display:block;
    float:left;
}
#menu-my-integra, ul.sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
#menu-my-integra > li {
    float:left;    
    display: block;
    margin-right:0px;
    position:relative;
    background:#F36F25;
    padding:8px;
    color:#FFFFFF;
    text-decoration:none;
}

#menu-my-integra > li:hover {
    background:#FFFFFF;
    color:#F36F25;
}

ul.sub-menu {
    display:none;
    width:200px;
    position:absolute;
    z-index:1;
}
#menu-my-integra li:hover ul.sub-menu {
    display: block;
    max-height: 200px;
    background:#F36F25;
}
ul.sub-menu li {
    color:#FFFFFF;
    float:none;
    padding:5px;
}

ul.sub-menu li:hover {
    color:#F36F25;
    background:#FFFFFF;
    float:none;
    padding:5px;
}

http://jsfiddle.net/c2u21366/

Answer 1

这将更改给 parent 的文本颜色:

#menu-my-integra li > a {
    color: inherit;
}

将 left: 0; 添加到 ul.sub-menu 以使您的子菜单向左对齐。

ul.sub-menu {
    left: 0;
}