0

私は現在サイトを開発していて、より多くのcssコーディングに取り掛かろうとしています。ナビゲーションのために、基本的なcssを実行しました。私が今やりたいのはサブメニューの作成ですが、ボタンの1つにカーソルを合わせると、メニューが表示されます。

これが私の現在のCssです：HTMLコード：

/*Naviagtion Bar Css */
ul {
    margin: 0;
    padding: 0;
    list-style:none;
}
li {
padding-top:5px;
color: #FFF;
width:120px;
float: left;
margin: 0;
padding: 0;
}
li a {
    display: block;
    width: 120px;
    height: 30px;
    padding-top:20px;
}
#homepage a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#homepage_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#homepage a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}

#guide a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#guide_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#guide a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}

#blog a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#blog_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#blog a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}

#media a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#media_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#media a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}

#forum a {
    background-image: url(../images/Button_NavBar_Unselected.png);
    background-repeat: no-repeat;
}
#forum_current a {
    background-image: url(../images/Button_NavBar_CurrentPage.png);
    background-repeat: no-repeat;
}
#forum a:hover {
    background-image: url(../images/Button_NavBar_Hover.png);
    background-repeat: no-repeat;
}
#navbar {
    position:relative;
    top:5px;
    float:left;
    margin-top:30px;
    margin-left:45px;
    width:600px;
    height: 50px;
    z-index:-1;
}

HTMLコード：

<div id="navbar" style="display: inline-block;">
<ul>
   <li id="homepage_current"><a><strong>Home</strong></a></li>
   <li id="guide"><a><strong>Guide</strong></a>
      <ul>
         <li> Sub Menu 1 </li>
         <li> Sub Menu 2 </li>
         <li> Sub Menu 3 </li>
      </ul>
   </li>
   <li id="blog"><a><strong>Blog</strong></a></li>
   <li id="media"><a><strong>Media</strong></a></li>
   <li id="forum"><a><strong>Forums</strong></a></li>
</ul>
</div>

どんな助けでもいただければ幸いです。このページへのリンクは次のとおりです。

4

2 に答える 2

1

特定の問題がない限り、そこにある5月のチュートリアルの1つをお勧めします。たとえば、おそらく最も有名なもの：吸盤！それは完璧なスタートです。
または、おそらくこれもあなたを助けることができます。

最後に、素敵なCSS3-Dropdownを作成する方法のチュートリアルがあります。

また、CSS-ドロップダウンメニューは、Stackoverflowで何度か話題になっています。

于 2012-07-26T15:34:40.897 に答える
0

それを行う方法は、最初に、このように親要素を相対的に設定する必要があります

#navbar>ul>li{position:relative;}

次に、子要素を親の下に設定します（非表示にします）（20ピクセルは任意です）

#navbar>ul>li>ul{position:absolute;top:20px;left:0px; display:none;}

次に、ホバー時にサブメニューを表示します

#navbar>ul>li:hover>ul{display:block;}

また、li cssはすべてのサブメニューにも影響するため、liの現在のスタイルを#navbar>ul>liに変更することをお勧めします。

また、>演算子に注意してください。これは、多くの古いナビゲーターIE6およびIE5ではサポートされていません。それが重要な場合は、次を使用してください。

<li id="guide" class="lvl1"><a><strong>Guide</strong></a>

とスタイル：

li.lvl1{...
于 2012-07-26T15:32:49.457 に答える