html - 菜单项悬停时子菜单不会显示(css html)

Question

我有一个简单的导航，在我的主要导航项之一上有一个子菜单。当用户将鼠标悬停在上面时，我希望显示子菜单项，当您进入子菜单 li 项时，主菜单链接仍然具有背景颜色“悬停”状态仍然处于事件状态。问题是我什至无法显示子菜单项!

我尝试了通常的 display:none 和 when :hovered { display:block}; 但它忽略了它。

你错过了什么？一定是这么简单的东西，但在 css 样式中看不到。

这里是一个关于如何设置示例的链接:http://jsfiddle.net/ULSsa/

Answer 1

这里是 demo link http://jsfiddle.net/ULSsa/6/使用更正的 CSS

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    background-color:#F2F2F2;
    }
ul, li, ol {
    list-style-type:none;
    }


ul#nav-1 {
    width:60%;
    height:46px;
    border:1px solid red;
}
ul#nav-1 li {
    position:relative;
    display:inline-block;
    *float:left;
    margin-top:16px;
    margin-left:-4px;
}
ul#nav-1 li a {
    padding:22px 13px;
    font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
    cursor:pointer;
    background-color:#000;
}
ul#nav-1 li ul#sub-menu {
    display:none;
    position:absolute;
    width:200px;
    list-style:none;
    left:0;
    top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
    display:block !important;
}
ul#nav-1 ul#sub-menu li {
    float: none;
    margin: 0;
}
ul#nav-1 ul#sub-menu li a {
    border-bottom:1px solid #dbddd4;
    background-color:#f2f2f2;
    width:200px;
    text-align:left;
    display: block;
    padding:0;
    padding-left:18px;
    padding-top:13px;
    padding-bottom:13px;
    float:left;
    margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
    background-color:#3a3a3a;
    color:#FFF;
}