css menu with dropdown li width

Question

when I set the "width" attribute of the .topMenu li, the .subMenu width is too narrow, even though I set it's position to absolute. It also is horizontal instead of vertical. Why?

the html

    <div id="navigation">
            <ul id="navBlock">
                <li>HOME</li>
                <li class="topMenu">
                    ABOUT US
                    <ul class="subMenu">
                        <li>WELCOME</li>
                        <li>HISTORY</li>
                    </ul>   
                </li>
         </ul>      
    </div>

the css

#navBlock{
     margin: 0;
     padding: 0;    
     list-style-type: none;  
}
#navBlock li{ 
    display: inline-block; 
    border:1pt solid #ccc;
    width:20%;
    text-align:center;
    background:#fff;
    position:relative;
}
#navBlock li:hover{ 
    cursor:pointer;
    background:orange;  
}
.topMenu:hover .subMenu{
    display:block;      
    position:absolute;
}   
.subMenu{
    display:none;
    margin: 0;
    padding: 0;             
}
.subMenu li{
    border:1pt solid #aaa;
    background:#fff;        
    width:200px;        
    display: inline; 
    position:absolute;
}
.subMenu li:hover{
    float:none;
}   

http://jsfiddle.net/L28Lf3se/

Answer 1

Change the width in px than %

#navBlock li{ 
    display: inline-block; 
    border:1pt solid #ccc;
    width:150px;
    text-align:center;
    background:#fff;
    position:relative;
}

Everything will work smooth

Answer 2

The problem is one of specificity. Your CSS for .subMenu li is being overridden by the #navMenu li because it thinks it's more specific. That whole block isn't being used. Re-label the .subMenu li to #navBlock li ul li and you'll be good to go.

Answer 3

#navBlock li (0-1-0-1) more specific than .subMenu li (0-0-1-1) that's why the width you set for .subMenu li are get overrided.
You shouldn't touch your #navBlock li width.
Change #navBlock li to #navBlock>li and magic will happen.
This is best you can do to solve your problem.