0

Web サイトのナビゲーション バーを作成しています。私はこれまで一度も作ったことがなく、これが今のところ私が持っているものです。最初の部分にマウスを合わせるまで、ドロップダウン部分を非表示にする方法がわかりません。特に私のコードでは、<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:noneenhzflepが示唆するように、で隠された要素から始めます。次に、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 に答える