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 回答