Html 如何在导航栏中隐藏元素，直到在css中悬停？_Html_Css_Hover_Menubar_Navbar

Html 如何在导航栏中隐藏元素，直到在css中悬停？

html css

Html 如何在导航栏中隐藏元素，直到在css中悬停？,html,css,hover,menubar,navbar,Html,Css,Hover,Menubar,Navbar,我正在为一个网站制作一个导航栏。我以前从来没有做过，这就是我到目前为止所做的。在您将鼠标移到第一部分之前，我不确定如何隐藏下拉部分。特别是对于我的代码，我希望将属性隐藏起来，直到您将鼠标移到它的父元素上。现在它们不断地被展示。谁能给我解释一下怎么做这是我的密码： <html><head> <style type='text/css'> body { padding-top: 6px; } /* menubar start */ #menuba

我正在为一个网站制作一个导航栏。我以前从来没有做过，这就是我到目前为止所做的。在您将鼠标移到第一部分之前，我不确定如何隐藏下拉部分。特别是对于我的代码，我希望将

属性隐藏起来，直到您将鼠标移到它的父元素

上。现在它们不断地被展示。谁能给我解释一下怎么做

这是我的密码：

<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>


身体{
填充顶部：6px；
}
/*菜单栏启动*/
#梅努巴{
背景：-webkit梯度（径向，中心，0，中心，460，从（#5c）到（#1f））；
背景：-webkit径向梯度（圆形，#5c，#1f）；
背景：-莫兹径向梯度（圆形，#5c，#1f）；
背景：-ms径向梯度（圆形，#5c，#1f）；
位置：相对位置；
显示：块；
高度：36px；
}
#菜单栏dl{
位置：绝对位置；
z指数：9005；
列表样式：无；
宽度：110px；
顶部：-16px；
}
#主页{左：240px；}
#项目{左：400px；}
#Hack{left:560px；}
#关于{左：720px；}
#联系人{左：880px；}
#梅努巴dt a{
显示：块；
浮动：左；
宽度：100%；
高度：20px；
左侧填充：24.75px；
右侧填充：24.75px；
填充顶部：8px；
垫底：8px；
边界半径：2px；
背景色：透明；
字体系列：“投石机MS”，无衬线；
文字装饰：无；
文本对齐：居中；
颜色：#ffffff；
}
#菜单栏dt a：悬停{
背景色:"828282 ;；
颜色：#000000；
}
#梅努巴dd{
浮动：左；
身高：100%；
宽度：100%；
保证金：0；
}
#菜单栏dd a{
显示：块；
宽度：100%；
身高：100%；
左侧填充：24.75px；
右侧填充：24.75px；
填充顶部：8px；
垫底：8px；
背景色：#5c；
颜色：#ffffff；
文本对齐：居中；
文字装饰：无；
字体系列：“投石机MS”，无衬线；
}
#菜单栏dd a：悬停{
背景色:"828282 ;；
颜色：#000000；
}
/*菜单栏端*/


灯光：打开
关

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

dl dd
{
    display: none;
}

dl:hover dd
{
    display: block;
}

按照enhzflep的建议，从隐藏的元素开始，显示：none。然后可以使用jquery显示和隐藏下拉列表

#菜单栏dd{
显示：无；
浮动：左；
身高：100%；
宽度：100%；
保证金：0；
}
$（“#菜单栏dl，#菜单栏dl dd”）。悬停（函数（）{
$（“#菜单栏dl dd”）.slideDown（）；
}，函数（）{
$（“#menubar dl dd”）.slideUp（）；
});

是的，与我提供的解决方案不同，您的解决方案可以轻松地将可见/不可见开关更改为动画淡入/淡出。如果你不想要动画，那就太过分了，但如果你在jQuery方面大多没有受过教育，那么这是一个很好的切入点。据我所知，CSS在速度方面总是优于javascript。

#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>