Hover is not working when creating menu in CSS

Question

I'm using CSS for creating a dropdown menu, but I don't know what's going wrong with it. It's not dropping the sub-menu (un-ordered list in my code) when hover is fired. I'm badly stuck here, please help me out.

I also tried the visibility property instead of display. I could see only menu1, menu2, menu3 in browser horizontally and nothing else.

I'm using IE7 on XP SP3.

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

maksbd19 · Accepted Answer · 2012-06-03 10:41:20Z

2

There mustn't any space between the tag name and pseudo class like you must use li:hover instead of li : hover.

answered Jun 3, 2012 at 10:41

maksbd19

3,84032 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dotty · Accepted Answer · 2012-06-03 10:26:54Z

1

Your style has become messed up. It's missing units and/or values. This seems to work. You can see it here.

#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;
}

answered Jun 3, 2012 at 10:26

dotty

41.7k67 gold badges155 silver badges197 bronze badges

Collectives™ on Stack Overflow

Hover is not working when creating menu in CSS

CSS:

HTML:

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

CSS:

HTML:

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related