当鼠标悬停显示为块时,Css ul显示为none

时间:2021-04-09 20:28:30

I'm working on a dropdown box but the only thing that doenst want to work is when I hover over the word Info in the unordered list the dropdownbox is not displayed.

我在做一个下拉框,但doenst唯一想做的是当我在无序列表中鼠标移到Info时下拉框就不会显示。

I know I have display:none; in ul style but can you change that to display:block; when hovered over the word info?

我知道我展示过:没有;在ul样式中,但可以将其更改为display:block;什么时候在信息这个词上徘徊?

HTML Code:

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 Code:

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;}

Help in advanced. any help is apreciated :) also post a code not only telling me whats wrong thanks!

帮助高级。任何帮助都会被告知:)同时也发布一个代码,不仅告诉我哪里出错了,谢谢!

2 个解决方案

#1


6  

use #Menu before your css class names : DEMO

在css类名称之前使用#菜单:演示。

like: #Menu li:hover > ul {display:list-item;}

比如:#Menu li:hover > ul {display:list-item;}

NOTIC: css Class names are Case-Sensitive

NOTIC: css类名是区分大小写的

#2


0  

I am thinking this is because the html code contains an inline display:none. In the inner <ul>, we should remove <ul style="display:none;"> in the above html.

我认为这是因为html代码包含一个内联显示:none。在内部

    ,我们应该删除

#1


6  

use #Menu before your css class names : DEMO

在css类名称之前使用#菜单:演示。

like: #Menu li:hover > ul {display:list-item;}

比如:#Menu li:hover > ul {display:list-item;}

NOTIC: css Class names are Case-Sensitive

NOTIC: css类名是区分大小写的

#2


0  

I am thinking this is because the html code contains an inline display:none. In the inner <ul>, we should remove <ul style="display:none;"> in the above html.

我认为这是因为html代码包含一个内联显示:none。在内部

    ,我们应该删除