CSS - ナビゲーションメニュー - サブメニュー
-
12-12-2019 - |
質問
私は現在サイトを開発していて、私はより多くのCSSコーディングに参加しようとしています、私はナビゲーションの基本的なCSSを行っています。私が今やりたいことはサブメニューを作るので、メニューが表示されます。
これが私の現在の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>
.
あらゆる助けが理解されるでしょう。ページへのリンク。
解決
それを行う方法は、まず、こののように親要素を関連付ける必要があります。
#navbar>ul>li{position:relative;}
.
その後、子要素を親の下に設定する(そしてそれを非表示にする)(20 pxは任意)
#navbar>ul>li>ul{position:absolute;top:20px;left:0px; display:none;}
.
それからサブメニューをhover に表示させる
#navbar>ul>li:hover>ul{display:block;}
.
また、LI CSSがすべてのサブメニューにも影響を与えるため、LIの現在のスタイルを#NAVBAR> UL> LIに変更することをお勧めします。
と>演算子に注意して、 Lot Old Navigator IE6&IE5ではサポートされていません。
.
<li id="guide" class="lvl1"><a><strong>Guide</strong></a>
とスタイル:
.li.lvl1{...
他のヒント
あなたが特定の問題を抱えていない限り、私はあなたがそこにあるかもしれないかもしれないチュートリアルのうちの1つを勧めます。たとえば、おそらく最も有名なもの: suckerfish !それは完璧なスタートです。
またはおそらくこのもあなたを助けます。
最後に、ここに、素敵な css3-dropdown を作成する方法についてのチュートリアルです。
CSS-Dropdownメニューは、ここでStackOverflowで数回話されています。
所属していません StackOverflow