css menu with dropdown li width - html

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

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 2

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 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.