无法让我的菜单栏中的悬停工作

Question

我的菜单栏中的悬停无法正常工作。 html和css如下。我可以让display: none 自行工作。我可以让悬停自行工作。他们只是不会一起工作。不知道我做错了什么。

这是html：

<nav>
   <ul>
     <li><a href="#"><img class="mainbar"src="images/logov6v2.png" width="175" height="150" padding="0" text-align="center" vertical-align="text-top"></a>              

        <li id="menudrop" class="rightbar"><a href="#">Menu</a></li>
           <ul data-toggle="">
             <li><a href="#">Account Settings</a></li>
             <li><a href="#">About Us</a></li>
             <li><a href="#">Contact</a></li>
            </ul>
    </li>
   </ul>
</nav>

这是css：

#menudrop.rightbar ul li a {
color: red;
display: block;
text-decoration: none;
}

nav ul li ul {
display: none ;
background: #5f6975;
position: relative;
top:100%;
}

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

Answer 1

除了修复一些缺失的结束标签之外，主要的调整是改变这个

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

进入那个

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

由于 nav ul li ul 设置为 display:none;，因此无法在其上设置悬停。

在Fiddle中调整

没有图片：

#menudrop.rightbar ul li a {
    color: red;
    display: block;
    text-decoration: none;
}
nav ul li ul {
    display: none;
    background: #5f6975;
    position: relative;
    top:100%;
}
nav ul li:hover ul {
    display: block;
}

<nav>
    <ul>
        <li id="menudrop" class="rightbar"><a href="#">Menu</a>

            <ul data-toggle="">
                <li><a href="#">Account Settings</a>

                </li>
                <li><a href="#">About Us</a>

                </li>
                <li><a href="#">Contact</a>

                </li>
            </ul>
        </li>
    </ul>
</nav>