我正在为网站制作导航栏。我以前从来没有做过，这是我到目前为止所做的。在将鼠标悬停在第一部分上之前，我不确定如何隐藏下拉部分。具体到我的代码，我想要 <dd>隐藏属性，直到您将鼠标悬停在它的父项上 <dt>元素。现在它们一直在显示。任何人都可以向我解释如何执行此操作吗？
这是我的代码:
<html><head>
<style type='text/css'>
body {
padding-top: 6px;
}
/* menubar start */
#menubar {
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#5c5c5c), to(#1f1f1f));
background: -webkit-radial-gradient(circle, #5c5c5c, #1f1f1f);
background: -moz-radial-gradient(circle, #5c5c5c, #1f1f1f);
background: -ms-radial-gradient(circle, #5c5c5c, #1f1f1f);
position: relative;
display: block;
height: 36px;
}
#menubar dl {
position: absolute;
z-index: 9005;
list-style: none;
width: 110px;
top: -16px;
}
#Home { left: 240px; }
#Projects { left: 400px; }
#Hack { left: 560px; }
#About { left: 720px; }
#Contact { left: 880px; }
#menubar dt a {
display: block;
float: left;
width: 100%;
height: 20px;
padding-left: 24.75px;
padding-right: 24.75px;
padding-top: 8px;
padding-bottom: 8px;
border-radius: 2px;
background-color: transparent;
font-family: 'Trebuchet MS', sans-serif;
text-decoration: none;
text-align: center;
color: #ffffff;
}
#menubar dt a:hover {
background-color: #828282;
color: #000000;
}
#menubar dd {
float: left;
height: 100%;
width: 100%;
margin: 0;
}
#menubar dd a {
display: block;
width: 100%;
height: 100%;
padding-left: 24.75px;
padding-right: 24.75px;
padding-top: 8px;
padding-bottom: 8px;
background-color: #5c5c5c;
color: #ffffff;
text-align: center;
text-decoration: none;
font-family: 'Trebuchet MS', sans-serif;
}
#menubar dd a:hover {
background-color: #828282;
color: #000000;
}
/* menubar end */
</style>
</head><body>
<div id='menubar'>
<dl id='Home'>
<dt><a href='#'>Home</a></dt>
</dl>
<dl id='Projects'>
<dt><a href='#'>Projects</a></dt>
<dd><a href='#'>Mini Projects</a></dd>
<dd><a href='#'>In Progress</a></dd>
<dd><a href='#'>Help</a></dd>
</dl>
<dl id='Hack'>
<dt><a href='#'>Hack</a></dt>
<dd><a href='#'>Information</a></dd>
<dd><a href='#'>Tutorials</a></dd>
<dd><a href='#'>Challenges</a></dd>
</dl>
<dl id='About'>
<dt><a href='#'>About</a></dt>
</dl>
<dl id='Contact'>
<dt><a href='#'>Contact Us</a></dt>
</dl>
</div>
<span id='lights' style="font-family: 'Trebuchet MS', sans-serif; font-size: 85%; color: #636363; line-height: 20%"><br>
Lights: On
<input type='radio' name='lis' value='on' id='LOn' onclick='setL(true)'>
Off
<input type='radio' name='lis' value='off' id='LOff' onclick='setL(false)'>
</span>
</body></html>
最佳答案
按照 enhzflep 的建议，从使用 display:none 隐藏的元素开始。然后你可以使用 jquery 来显示和隐藏下拉列表。
关于html - 如何隐藏导航栏中的元素，直到悬停在 css 中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13131910/