そこで、水平ロールオーバー メニューを作成しようとしています。
「現在のページ」の作業を開始して、訪問者がナビゲーション バーのどこにいるかを示すまでは問題ありませんでした。「アクティブ」という名前のクラスでそうしたかったのです。サブメニューを常に表示したい。
（私のナビゲーションから）「アクティブ」なクラスを持つものよりもhtmlコードの前にあるように見え<li>ますが、マウスがホバーされたときに想定どおりに反応しません。サブメニューが表示されなくなった…
私が明確に理解しているのか、それとも意味を成しているのかはわかりません。それは私にとってまだ新しいテクノロジーであり、何が起こっているのかを説明するのは非常に困難です.
あなたが私を助けることができるかどうか、または私に別の説明をしてほしいかどうか教えてください.
どうもありがとう
ミック
アップデート
以下は、Wire42 のおかげで今の私のスクリーンショットです (サブ メニュー項目に低い Z インデックスと白い背景を追加しました)。そのため、前の要素はマウス ホバーに適切に反応しますが、アクティブな要素 (例では「アクションを実行」) にはサブ メニューが表示されません。
画像 1:アクティブなアイテムにサブ メニューが表示されない (マウスをホバーしていなくてもサブ メニューが表示されるはずです)
画像 2:マウスでホバーしたアイテムの問題が解決されました
何か不足していますか？
CSS
#menu_wrapper {
padding:0;
margin:0;
position:relative;
left:108px;
top:2px;
}
#menu {
width:812px;
height:28px;
background-color: #B4B4B4;
padding:0 0 0 60px;
}
#menu li {
display: inline;
list-style-type: none;
}
#menu li a {
font-size: 13px;
text-transform: uppercase;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
float: left;
color: #000000;
padding: 6px 13px;
border-right: 1px solid #999;
}
/* get rid of last border in menus*/
#menu li:last-child a, #menu li.active li:last-child a, #menu li:hover li:last-child a{
border:none;
}
#menu li:hover > a {
background-color: #e9748b;
}
#menu li.active > a {
background-color: #e9748b;
}
/*-------------------SUB MENU---------------*/
#menu li ul {
display:none;
padding:0 0 0 60px;
}
#menu li:hover > ul {
display:block;
position:absolute;
padding: 0 0 0 90px;
left:0; top:28px;
background:url(Images/background_sub_menu.png) repeat-x;
width:782px;
min-height:23px;
}
#menu li.active > ul{
display:block;
position:absolute;
padding: 0 0 0 90px;
left:0; top:28px;
background:url(Images/background_sub_menu.png) repeat-x;
width:782px;
min-height:23px;
z-index: -1;
}
#menu li li {
list-style:none;
}
#menu li li a, #menu li.active li a{
color:#000000;
background:none;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
text-transform: none;
border-right: 1px solid #999;
padding:5px 10px;
margin:0;
}
#menu li.active li a{
z-index:-1;
}
#menu li li a:hover {
background:none;
font-weight: bolder;
color: #000000;
background-color: #CC6633;
}
#menu li li.active a {
text-decoration:underline;
background:none;
font-weight: bolder;
color: #000000;
z-index:-1;
}
HTML
<ul id="menu">
<li><a href="index.html">Home</a>
<ul>
<li><a href="#"> </a></li>
</ul>
</li>
<li><a href="#">About the Foundation</a>
<ul>
<li><a href="#">What we do</a></li>
<li><a href="#">Who we are</a></li>
<li><a href="#">Goals for 2012</a></li>
<li><a href="#">Annual reports</a></li>
<li><a href="#">Help 4 Guys .com</a></li>
</ul>
</li>
<li><a href="#">Programs</a>
<ul>
<li><a href="#">Male Abuse Awarness Week</a></li>
<li><a href="#">Help 4 Guys .com</a></li>
<li><a href="#">Events</a></li>
</ul>
</li>
<li class="active"><a href="#">Take Action</a>
<ul>
<li><a href="1">Volunteer for PLF</a></li>
<li><a href="2">Help our Foundation</a></li>
<li class="active"><a href="3">Donate</a></li>
<li><a href="4">FAQ</a></li>
</ul>
</li>
<li><a href="#">Find Support</a>
<ul>
<li><a href="#">Child Abuse FAQ</a></li>
<li><a href="#">Find Support Near You</a></li>
<li><a href="#">Support for the Families</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Our Network</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#"></a></li>
</ul>
</li>
</ul>