我正在尝试使用具有悬停效果的 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>
我不确定我在此处的 CSS 代码中做错了什么。任何人都可以帮我处理代码以及如何正确实现悬停下拉菜单吗？
谢谢， 巴维克
最佳答案
你错误的下拉菜单标记
代替
<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>
到
<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>
示例:
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>关于html - 使用 HTML/CSS 创建悬停下拉菜单时遇到问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30690951/