0

我正在为网站制作导航栏。我以前从未做过，这就是我到目前为止所拥有的。在将鼠标悬停在第一部分之前，我不确定如何隐藏下拉部分。特别是对于我的代码，我希望<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>
4

3 回答 3

1

display:none从enhzflep 建议的隐藏元素开始。然后你可以使用 jquery 来显示和隐藏下拉菜单。

这是一个小提琴。

于 2012-10-30T02:54:38.317 回答
0

如果将这些样式添加到 CSS 中，它会起作用。基本上，他们说 dd 元素的默认状态是隐藏的。如果一个 dl 元素被悬停，那么它的 dd 子元素是可见的。

dl dd
{
    display: none;
}

dl:hover dd
{
    display: block;
}
于 2012-10-30T02:48:19.690 回答
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>

​</p>

JSFIDDLE

于 2012-10-30T11:03:41.667 回答