ネストされたリストを含むメニューから、いくつかの醜い動作が発生しています。
親メニューには、いくつかの大まかなカテゴリがあります。ユーザーがこれらのリスト項目のいずれかにカーソルを合わせると、その下に子メニューが表示されます。これで問題ありません。
ただし、子項目にもサブメニューを含めることができます (これらを孫と呼びます)。これらもホバー時に表示されますが、ユーザーが孫にホバーしなくなると、子メニュー全体が消えます。
- 親にカーソルを合わせると、3 つの子が表示されます。これはいい。
- 子 1 にカーソルを合わせると、孫が表示されます。これもいいですね。
- しかし、子 1 の下の孫が展開されたら、子 2 または子 3 をクリックしようとすると、扱いにくくなります。これは非常に悪いです。
この間抜けな動作なしに、ここでまともなホバー効果をどのように達成できますか? (CSS ソリューションが望ましいでしょう。)
HTML
<div id="centeredmenu">
<ul>
<li>
<p><a href="#"><span>Parent</span></a></p>
<ul>
<li>
<a href="#">Child 1 </a>
<ul>
<li><a href="#">grandchild 1</a></li>
<li><a href="#">grandchild 2</a></li>
<li><a href="#">grandchild 3</a></li>
</ul>
</li>
<li><a href="#">Child 2</a></li>
<li><a href="#">Child 3</a></li>
</ul>
</li>
</ul>
</p>
CSS
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 0px;
padding:3px 10px;
background: rgb(240,240,240);
color:#333333;
text-decoration:none;
line-height:2.3em;
border-top: 4px solid transparent;
border-right: 1px solid transparent;
border-bottom: 3px solid transparent;
border-left: 1px solid #848484;
}
/*hides the sub menu*/
#centeredmenu ul li ul li{
display: none;
}
/*displays sub menu on hover*/
#centeredmenu ul li:hover ul li {
display: block;
clear: both;
margin-left: 15px;
}
/*hides sub-sub menu*/
#centeredmenu ul li ul li ul{
display: none;
}
/*displays sub-sub menu on hover*/
#centeredmenu ul li ul li:hover ul {
display: block;
clear: both;
margin-left: 15px;
}