0

ドロップダウン メニューの作成に CSS を使用していますが、何が問題なのかわかりません。ホバーが発生したときにサブメニュー（私のコードでは順序付けられていないリスト）をドロップしていません。ここでひどく立ち往生しています。助けてください。

表示の代わりに可視性プロパティも試しました。ブラウザで水平にしか見ることができず menu1, menu2, menu3、他には何も見えませんでした。

XP SP3 で IE7 を使用しています。

CSS:

#navMenu ul{
    argin:0;        
    padding:0;
}
#navMenu li {
    margin:px;    
    padding:0;  
    position:relative;
    float:left; 
    display:block;  
    list-style:none;
}
#navMenu li a{
    text-align:center;
    text-decoration:none;
    width:100;  
    display:block;
}
#navMenu ul ul{ 
    display:none;
}
#navMenu ul li : hover  ul {
    width:auto;
    position:absolute;
    background:#453DD;
    display:block;
}

HTML:

<div id="wrapper" >
    <div id="navMenu">
        <ul>
            <li><a href="#">menu1</a>  
                <ul>
                    <li><a href="#">menuitem11</a></li>
                    <li><a href="#">menuitem12</a></li>
                    <li><a href="#">menuitem13</a></li>
                    <li><a href="#">menuitem14</a></li>
                </ul>   
            </li>
            <li><a href="#">menu2</a>   
                <ul>
                    <li><a href="#">menuitem11</a></li>
                    <li><a href="#">menuitem12</a></li>
                    <li><a href="#">menuitem13</a></li>
                    <li><a href="#">menuitem14</a></li>
                </ul>   
            </li>
            <li><a href="#">menu3</a>   
                <ul>
                    <li><a href="#">menuitem11</a></li>
                    <li><a href="#">menuitem12</a></li>
                    <li><a href="#">menuitem13</a></li>
                    <li><a href="#">menuitem14</a></li>
                </ul>   
        </ul>
    </div>
</div>

JSFiddle

4

2 に答える 2

2

li:hoverの代わりに使用する必要があるように、タグ名と疑似クラスの間にスペースがあってはなりませんli : hover。

于 2012-06-03T10:41:20.983 に答える
1

あなたのスタイルは台無しになりました。単位や値がありません。これはうまくいくようです。ここで見ることができます。

#navMenu ul{
margin:0;        
padding:0;
}
#navMenu li {
margin:0px;    
padding:0;  
position:relative;
float:left; 
display:block;  
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100px;  
display:block;
}
#navMenu ul ul{ 
display:none;
}
#navMenu ul li:hover  ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
于 2012-06-03T10:26:54.530 に答える