Question

我正在制作一个下拉框但是唯一想要工作的是当我将鼠标悬停在无序列表中的单词信息时，不会显示下拉框。

我知道我在display:none;中有ul style，但是当您在字词信息上悬停时可以将其更改为display:block;吗？

HTML代码：

<ul id="Menu">
     <li><a href="Index.html">Home </a></li>
     <li><a href="Info.html">Info </a>
          <ul style="display:none;">
             <li><a href="Index.html">Program</a></li>
             <li><a href="Index.html">Getting Started</a><li>
             <li><a href="Index.html">Credits</a></li>
         </ul>
     </li>
     <li><a href="Community.html">Video </a></li>
     <li><a href="Store.html">server </a></li>
     <li><a href="Profile.html">Profile </a></li>
     <li><a href="Help">Help</a></li>
</ul>

CSS代码：

#Menu {
list-style:none;
font-size:16px;
font-weight:Bold;
padding:14px 0 0;
width:415px;
margin-top:0;
float:left;
margin-left:0;
}

#menu { list-style:none;}
li:hover > ul {display:list-item;}
li ul { margin:0; padding:0; position:absolute;z-index:5;padding-top:6px;}
li { float:left; margin-left:10px; }
li ul li { float:none; margin:0; display:inline;}
li ul li a {display:block; padding:6px 10px; background:#333; white-space:nowrap;}
li { display: list-item; text-align: -webkit-match-parent;}
ul { border:0; font-size:100%; font:inherit;vertical-align:baseline;}

高级帮助。任何帮助是apreciated :) 还发布了一个代码，不仅告诉我什么是错误的谢谢！

Answer 1

在您的css类名称之前使用#Menu： DEMO

喜欢：#Menu li:hover > ul {display:list-item;}

NOTIC： css类名称区分大小写

Answer 2

我认为这是因为html代码包含内联display:none。在内部<ul>中，我们应该删除上面的html中的<ul style="display:none;">。

当悬停显示为阻止时，Css ul显示为none

2 个答案: