css меню с раскрывающимся списком li width

Question

Когда я устанавливаю атрибут width для .topMenu li, ширина .subMenu слишком узкая, хотя я устанавливаю ее положение в абсолютное. Он также горизонтальный, а не вертикальный. Зачем?

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> 

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

Проблема является одной из особенностей. Ваш CSS для .subMenu li переопределяется #navMenu li, потому что он считает его более конкретным. Весь этот блок не используется. Перепишите ярлык .subMenu li на номер #navBlock li ul li, и вам будет хорошо.

Answer 2

Изменение ширины в рх, чем%

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

Все будет работать гладко

Answer 3

#navBlock li (0-1-0-1) более конкретно, чем .subMenu li (0-0-1-1), поэтому ширина, которую вы установили для .subMenu li, переопределяется.
Вы не должны касаться вашей ширины #navBlock li.
Изменить #navBlock li на #navBlock>li и произойдет волшебство.
Это лучшее, что вы можете сделать, чтобы решить вашу проблему.