サブメニュー付きの水平メニューを作成しました。jsfiddleでは、サブメニューが100%で正しく機能していないのか、ローカルでは機能していないのかわかりません。作業リンクは次のとおりです:http://jsfiddle.net/IronFeast/g8MDP/
そしてここにコードがあります:
<ul id="navbar">
<li><a href="index.php">Home</a></li>
<li><a href="#">Gallery</a>
<ul class="submenu">
<li><a href="photogallery1.php">Photogallery 1</a></li>
<li><a href="photogallery2.php">Photogallery 2</a></li>
<li><a href="photogallery3.php">Photogallery 3</a></li>
</ul>
</li>
<li><a href="events.php">Events</a></li>
<li><a href="#">Blog</a>
<ul class="submenu">
<li><a href="personal.php">Personal</a></li>
<li><a href="dev.php">Dev</a></li>
</ul>
</li>
<li><a href="#">About</a>
<ul class="submenu">
<li><a href="page1.php">Page 1</a></li>
<li><a href="page2.php">Page 2</a></li>
</ul>
</li>
CSS:
#navbar {
background-color: #4E78B4;
position: absolute;
text-align: center;
margin: 0;
padding-bottom: 7px;
padding-top: 7px;
float: left;
left: 10px;
width: 940px;
font-size: 14px;
z-index: 100;
}
#navbar li {
list-style: none;
float: left;
color: #E9EBDE;
padding-left: 24px;
padding-right: 4px;
z-index: 100;
}
#navbar li a {
display: inline;
padding-top: 7px;
padding-bottom: 7px;
padding-right: 8px;
padding-left: 8px;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
color: #ffffff;
z-index: 100;
text-align: center;
}
#navbar ul li a {
display: block;
padding-top: 6px;
padding-bottom: 3px;
padding-right: 8px;
padding-left: 8px;
text-decoration: none;
z-index: 100;
}
#navbar li a:hover {
color: #000000;
background-color: #ffffff;
padding-right: 8px;
padding-left: 8px;
z-index: 100;
}
#navbar li ul{
display: none;
background-color: #41B6DC;
z-index: 100;
}
#navbar li:hover ul, #navbar li.hover ul {
position: absolute;
display: block;
left: 0;
width: 940px;
margin: 0;
padding: 0;
z-index: 100;
margin-top: 7px;
}
#navbar li:hover li, #navbar li.hover li {
float: left;
z-index: 100;
}
#navbar li:hover li a, #navbar li.hover li a {
color: #000;
z-index: 100;
}
#navbar li li a:hover {
color: #4E78B4;
z-index: 100;
}
「ギャラリー」の上にマウスを置くとサブメニューが開きますが、「フォトギャラリー1」をクリックするとそのページに移動しますが、残念ながらそのページにいるとメニューが閉じます。
「ギャラリー」が強調表示され、サブメニューが開いたままになり、「フォトギャラリー1」ボタンも強調表示されます。
どんな助けでも素晴らしいでしょう。前もって感謝します