純粋な CSS でドロップダウン メニューを作成しようとしています。レベル 4 までは問題なく動作していますが、レベル 5 を追加しようとすると、期待どおりに動作しません。ここに私のコードリンクがあります: http://jsfiddle.net/pX6C6/5/
CSS 部分:
#menu table {
border-collapse:collapse;
position:absolute;
top:0;
left:0;
z-index:80;
font-size:1em;
}
#menu li a {
display:block;
height:30px;
font-family:arial, sans-serif;
font-size:13px;
letter-spacing:-1px;
line-height:29px;
width:125px;
text-decoration:none;
text-align:center;
}
#menu :hover {
color:#ffffff;
background:#5F90D0;
}
#menu :hover > a {
color:#ffffff;
background:#5F90D0;
}
#menu ul, #menu :hover ul ul, #menu :hover ul :hover ul ul, #menu :hover ul :hover ul:hover ul ul, #menu :hover ul :hover ul:hover ul:hover ul ul, #menu :hover ul :hover ul:hover ul:hover ul:hover ul, #menu :hover ul :hover ul:hover ul:hover ul:hover ul.left {
position:absolute;
left:-9999px;
width:128px;
}
#menu :hover ul :hover ul, #menu :hover ul :hover ul :hover ul, #menu :hover ul :hover ul :hover ul:hover ul, #menu :hover ul :hover ul :hover ul:hover ul:hover ul, #menu :hover ul :hover ul :hover ul:hover ul :hover ul:hover ul {
padding:0 3px;
left:125px;
top:-3px;
}
#menu :hover ul :hover ul.left, #menu :hover ul :hover ul :hover ul.left, #menu :hover ul :hover ul :hover ul:hover ul.left, #menu :hover ul :hover ul :hover ul:hover ul.left {
padding:0 3px;
left:-131px;
top:-3px;
}
#menu {
list-style-type:none;
padding:0;
margin:0;
}
#menu ul {
list-style-type:none;
padding:0;
margin:0;
}
#menu li {
float:left;
background:#949494;
margin:3px 3px 0 0;
position:relative;
}
これを修正する方法について何か提案はありますか? 前もって感謝します。