使用HTML / CSS创建悬停下拉菜单时遇到问题
[英]Having trouble creating hover drop down menu with HTML/CSS
问题描述
I am trying to created a drop down menu with HTML/CSS with hover effect.Below is my HTML code. 
我正在尝试使用具有悬停效果的HTML / CSS创建一个下拉菜单。以下是我的HTML代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
body {
background-color:#181818;
margin: 0px;
}
ul li {
display: inline-block;
font-size: 140%;
color: orange;
width: 150px;
background-color: #505050;
height: 50px;
border-radius: 150px;
position: relative;
}
p {
margin-top: 10px;
text-align: center;
margin-bottom: 20px;
}
ul li:hover {
color: #505050;
background-color: orange;
}
/*ul li ul {
visibility: hidden;
}*/
#id2 {
display: none;
position: absolute;
z-index: 999;
left: 0;
}
#id1:hover #id2 {
display: block; /* display the dropdown */
}
</style>
<body>
<ul id="topMenu">
<li><p>Home</p></li>
<li><p id="id1">Projects</p></li>
<ul id="id2">
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
</body>
</html>
I am not sure what I am doing wrong in css code here. 我不确定我在这里的CSS代码中做错了什么。 Can anyone please help me with the code and How I can implement the hover drop down menu correctly.? 谁能帮助我提供代码以及如何正确实现悬停下拉菜单。
Thanks, Bhavik 谢谢，Bhavik
2 个解决方案
解决方案1
1 2015-06-07 07:20:32
you wrong markup for a drop-down menu 您为下拉菜单添加了错误的标记
instead 代替
<ul id="topMenu">
<li><p>Home</p></li>
<li><p id="id1">Projects</p></li>
<ul id="id2">
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
to 至
<ul id="topMenu">
<li><p>Home</p></li>
<li><p>Projects</p>
<ul>
<li><p>Project 1</p></li>
<li><p>Project 2</p></li>
<li><p>Project 3</p></li>
</ul>
</li>
<li><p>About Us</p></li>
<li><p>contact us</p></li>
</ul>
Example: 例：
body { background-color:#181818; margin: 0px; } ul li { display: inline-block; font-size: 140%; color: orange; width: 150px; background-color: #505050; height: 50px; border-radius: 150px; position: relative; } p { margin-top: 10px; text-align: center; margin-bottom: 20px; } ul li:hover { color: #505050; background-color: orange; } ul li ul{ display: none; padding-left: 0; } ul li:hover ul{ display: block; position: absolute; top: 100%; left: 0; }
<ul id="topMenu"> <li> <p>Home</p> </li> <li> <p id="id1">Projects</p> <ul id="id2"> <li> <p>Project 1</p> </li> <li> <p>Project 2</p> </li> <li> <p>Project 3</p> </li> </ul> </li> <li> <p>About Us</p> </li> <li> <p>contact us</p> </li> </ul>
解决方案2
0 2015-06-07 07:25:54
look this: http://jsfiddle.net/412cosa7/ 看这个： http : //jsfiddle.net/412cosa7/
HTML: HTML：
the #id1 is not the ancestor of the #id2 , so, first ,you can remove #id2 from <p> and add it to <li> , then put #id2's element in #id1's . #id1不是#id2的祖先，因此，首先，您可以从<p>删除#id2并将其添加到<li> ，然后将#id2's元素放入#id1's元素中。
In fact, <p> in your source is not necessary. 实际上，您的源文件中的<p>是不必要的。
CSS: CSS：
use parent selector " > " . 使用父选择器“ > ”。 eg: #id1:hover > #id2 例如： #id1:hover > #id2
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.