Html CSS 下拉菜单悬停效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18863171/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS drop down menu hover effect
提问by user2789880
i was trying to make a simple css drop down menu. I'm not able to achieve the drop down sub menu when you hover over a link. Below is my html and css rule, thanks.
我试图制作一个简单的 css 下拉菜单。当您将鼠标悬停在链接上时，我无法获得下拉子菜单。下面是我的 html 和 css 规则，谢谢。
ul#menu li
{
position:relative;
list-style-type:none;
float: left;
padding:0px;
width: 125px;
height: 25px;
}
ul#sub1 li
{
position:absolute;
left:0;
width:125px;
visibility: hidden;
}
ul#menu li:hover #sub1
{
visibility:visible;
}
<ul id="menu">
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a>
<ul id="sub1">
<li><a href="#">Hyperlink 2.1</a></li>
<li><a href="#">Hyperlink 2.2</a></li>
</ul>
</li>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a></li>
</ul>
回答by PSL
Try this:
尝试这个：
ul#sub1 {
position:absolute;
left:0;
width:125px;
visibility: hidden;
}
ul#menu li:hover #sub1 {
visibility:visible;
}
issue is that your your menu ul is visible (always) but the li's inside them are invisible (always) due to the selector of the this rule ul#sub1 li.
问题是你的菜单 ul 是可见的（总是），但是由于 this rule 的选择器，它们里面的 li 是不可见的（总是）ul#sub1 li。
Do remember that visibility:hidden hides the element but still occupies space in DOM, whereas display:none hides the element and takes it out of page element flow
请记住，visibility:hidden 隐藏了元素，但仍然占用了 DOM 中的空间，而 display:none 隐藏了元素并将其从页面元素流中取出
Also you necessarily do not need to use ids in css selectors especially for a menu like this. You can achieve it without that, consider the situation with many level menus, by using ids you will have to write selectors indefinitely. Instead you can try something like this.
此外，您不一定需要在 css 选择器中使用 id，尤其是对于这样的菜单。您可以在没有它的情况下实现它，考虑具有许多级别菜单的情况，通过使用 id，您将不得不无限期地编写选择器。相反，你可以尝试这样的事情。
ul#menu ul {
padding:0px;
}
ul#menu li {
position:relative;
list-style-type:none;
float: left;
width: 125px;
}
ul#menu li > ul {
display: none;
}
ul#menu li:hover > ul {
display:block;
}
回答by Alex
don't use visibility property for such thing. Try the following code it will solve your problem:
不要对这种事情使用可见性属性。尝试以下代码它将解决您的问题：
Your CSS:
你的 CSS：
ul#menu li{
float: left;
list-style-type:none;
width: 125px;
}
li#sub1 ul{
display: none;
}
ul#menu li#sub1:hover ul{
display: block;
}
Updated HTML: (apply id on li containing dropdown instead of ul)
更新的 HTML：（在包含下拉列表的 li 上应用 id 而不是 ul）
<ul id="menu">
<li><a href="#">Hyperlink 1</a></li>
<li id="sub1"><a href="#">Hyperlink 2</a>
<ul>
<li><a href="#">Hyperlink 2.1</a></li>
<li><a href="#">Hyperlink 2.2</a></li>
</ul>
</li>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a></li>
</ul>
Further you can check out this page to learn how display and visibility works - http://www.tutorialrepublic.com/css-tutorial/css-visibility.php
此外，您可以查看此页面以了解显示和可见性的工作原理 - http://www.tutorialrepublic.com/css-tutorial/css-visibility.php
回答by Kuncara Kurniawan
Here the full HTML+CSS script to solve your problem
这里有完整的 HTML+CSS 脚本来解决你的问题
<style>
ul#menu li
{
position:relative;
list-style-type:none;
float: left;
padding:0px;
width: 125px;
height: 25px;
}
ul#menu li ul#sub1
{
background:red;
display:none;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:230px;
z-index:200;
}
ul#menu li:hover ul#sub1
{
display:block;
}
ul#menu li ul a:hover, ul#menu li ul li:hover a
{
background:green;
color:#ffffff;
text-decoration:none;
}
</style>
<ul id="menu">
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a>
<ul id="sub1">
<li><a href="#">Hyperlink 2.1</a></li>
<li><a href="#">Hyperlink 2.2</a></li>
</ul>
</li>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a></li>
</ul>
You can try your self for any modification here: http://www.okeschool.com/code-editor/css/how-to-make-drop-down-menu-with-css-and-image.html
您可以在此处尝试自己进行任何修改： http://www.okeschool.com/code-editor/css/how-to-make-drop-down-menu-with-css-and-image.html
回答by Bilal Ahmed
Apply this one....
应用这个....
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
ul li
{
position:relative;
list-style-type:none;
/* float: left;*/ /*dont use this for this kind of menu */
display: inline-block;
padding:0px;
width: 125px;
height: 25px;
background: yellow;
}
#sub1
{
display: none;
position:absolute;
}
ul li:hover ul#sub1
{
/* visibility:visible;*//*dont use this for this kind of menu */
display: block; /* use this*/
right:0;
}
</style><body>
<ul>
<li><a href="#">Hyperlink 1</a></li>
<li><a href="#">Hyperlink 2</a>
<ul id="sub1">
<li><a href="#">Hyperlink 2.1</a></li>
<li><a href="#">Hyperlink 2.2</a></li>
</ul>
</li>
<li><a href="#">Hyperlink 3</a></li>
<li><a href="#">Hyperlink 4</a></li>
</ul>
</body>apply This One..dont use extra classes or id's.
应用这个..不要使用额外的类或ID。
