我正在为网站制作导航栏。我以前从来没有做过,这是我到目前为止所做的。我不确定如何将鼠标悬停在第一部分之前隐藏下拉部分。特别是对于我的代码,我希望隐藏<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>
答案 0 :(得分:1)
以enhzflep建议的display:none
隐藏元素开始。然后你可以使用jquery来显示和隐藏下拉列表。
答案 1 :(得分:0)
如果您将这些样式添加到CSS中,它可以正常工作。 基本上,他们说隐藏了dd元素的默认状态。 如果dl元素悬停,则它的dd子元素可见。
dl dd
{
display: none;
}
dl:hover dd
{
display: block;
}
答案 2 :(得分:0)
#menubar dd {
display:none;
float: left;
height: 100%;
width: 100%;
margin: 0;
}
<script>
$("#menubar dl,#menubar dl dd").hover(function(){
$("#menubar dl dd").slideDown();
}, function(){
$("#menubar dl dd").slideUp();
});
</script>