尝试鼠标悬停时，CSS下拉菜单消失

Question

我创建了一个菜单和一个下拉子菜单。但是当我尝试将鼠标悬停在子菜单上时，它就会消失。

我尝试了网上推荐的一些解决方案，但无法纠正。 有人可以帮忙纠正吗？

由于

HTML代码如下：

<nav>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
        <ul>
        <li><a href="#">Company Background</a></li>
        <li><a href="#">Company Awards</a></li>
        <li><a href="#">Services Program</a></li>
        </ul>
    </li>
<li><a href="#">Products</a>
        <ul>
        <li><a href="#">Honda</a></li>
        <li><a href="#">Yamaha</a></li>
        </ul>
    </li>
    <li><a href="#">Gallery</a>
        <ul>
        <li><a href="#">Honda</a></li>
        <li><a href="#">Yamaha</a></li>
        </ul>
    </li>
    <li><a href="#">News and Events</a></li>
    <li><a href="#">Contact</a>
        <ul>
        <li><a href="#">Contact Information</a></li>
        <li><a href="#">Branches</a></li>
        </ul>
    </li>  
</ul>
</nav>

CSS如下：

nav ul ul {
    display: none;
}

nav ul li:hover > ul {
    display: block;
}

nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 0px rgba(0,0,0,0.15);
    padding: 0px;
    border-radius: 20px;  
    list-style:none;
    position:fixed;
    display:inline-table;   
}

nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li {
    float: left;
}

nav ul li ul li {
    float:none;
}

nav ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

nav ul li:hover a {
    color: #fff;
}

nav ul li a {
    display: block; 
    padding: 10px 20px;
    color: #757575; 
    text-decoration: none;
}

JSFIDDLE：http://jsfiddle.net/3hV27/

Answer 1

在这里工作得很好。你使用的是什么浏览器？