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

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>

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

Can't get the hover in my menu bar to work

css

drop-down-menu

hover