当悬停显示为阻止时,Css ul显示为none(Css ul display is none when hover display is block)

编程入门 行业动态 更新时间:2024-10-26 14:35:54
当悬停显示为阻止时,Css ul显示为none(Css ul display is none when hover display is block)

我正在开发一个下拉框,但唯一想要工作的是当我将鼠标悬停在无序列表中的单词Info上时,不会显示下拉框。

我知道我有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 :)也发布代码不仅告诉我什么是错误的谢谢!

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.

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

HTML Code:

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

#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!

最满意答案

在你的css类名之前使用#Menu : DEMO

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

NOTIC: css类名称区分大小写

use #Menu before your css class names : DEMO

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

NOTIC: css Class names are Case-Sensitive

更多推荐

本文发布于:2023-08-05 19:06:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1435816.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:ul   Css   display   block   hover

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!