выпадающее меню навигации не работает должным образом, то есть

Question

Я работаю над выпадающим меню навигации. некоторые из них не работают должным образом с IE 8 и меньшими версиями. Я думаю, что это может быть проблема с процентной шириной IE.

вот мой HTML

![here is the snapshot][3] 
 
#wrap { 
 
    width: 100%; 
 
    height: 30px; 
 
    margin: 0px; 
 
    z-index: 10000; 
 
    position: relative; 
 
    background-color: #cccccc; 
 
} 
 
.navbar { 
 
    list-style:none; 
 
    height: 20px; 
 
    padding: 0; 
 
    position: absolute; 
 
    margin:0; 
 
} 
 
.navbar li li { 
 
    white-space:nowrap; 
 
    width:100%; 
 
    display:block; 
 
} 
 
.navbar li { 
 
    width:20%; 
 
    float: left; 
 
    text-align: center; 
 
    list-style: none; 
 
    font: normal bold 12px/1em Arial, Verdana, Helvetica; 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #cccccc; 
 
} 
 
.navbar li a:hover { 
 
    color:White; 
 
    background-color: #660099; 
 
} 
 
.navbar a { 
 
    padding:9px 0; 
 
    border-left: 1px solid #9b9b9b; 
 
    border-right: 1px solid #9b9b9b; 
 
    text-decoration: none; 
 
    color: #660099; 
 
    display: block; 
 
} 
 
.navbar li:hover, .navbar li.hover, .navbar a:hover { 
 
    background-color: #cccccc; 
 
} 
 
.navbar li ul { 
 
    display: none; 
 
    height: auto; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.navbar li:hover ul, .navbar li.hover ul { 
 
    display: block; 
 
} 
 
.navbar li ul li { 
 
    background-color: #cccccc; 
 
} 
 
.navbar li ul li a { 
 
    border-left: 1px solid #9b9b9b; 
 
    border-right: 1px solid #9b9b9b; 
 
    border-top: 1px solid #9b9b9b; 
 
    border-bottom: 1px solid #9b9b9b; 
 
} 
 
.navbar li ul li a:hover { 
 
    background-color: #660099; 
 
    color:white; 
 
}

<div id="wrap"> 
 
    <ul style="width:100%" class="navbar"> 
 
     <li><a href="#Home">Home</a> 
 

 
     </li> 
 
     <li><a href="#parent1">parent1</a> 
 

 
     </li> 
 
     <li><a href="#parent2">parent2</a> 
 

 
      <ul class="childNav"> 
 
       <li><a href="#child1">child1sdfsfgggggggggggffdgdssdfgffgd</a> 
 

 
       </li> 
 
       <li><a href="#child2">child2sdfgfsdgfdsgfghgjgjkgghjg</a> 
 

 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#parent3">parent3</a> 
 

 
      <ul class="childNav"> 
 
       <li><a href="#Support">child1</a> 
 

 
       </li> 
 
       <li><a href="#Support">child2</a> 
 

 
       </li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#Support">contactus</a> 
 

 
     </li> 
 
    </ul> 
 
</div>

Любая помощь будет оценена спасибо.

Answer 1

Попробуйте использовать файл reset.css, чтобы удалить значения по умолчанию для браузера. Сделайте тот, который соответствует вашим потребностям. This one - хорошее начало.

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body { 
    line-height: 1; 
} 
ol, ul { 
    list-style: none; 
} 
blockquote, q { 
    quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
    content: ''; 
    content: none; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

лично я всегда делаю это тоже:

html, body { width: 100%; height: 100%; } 

JSfiddle имеет встроенный вариант сброса CSS. Я попробовал your page there, и, как вы можете видеть, появляется полоса прокрутки. Это связано с тем, что вы установили ширину вашего навигатора на 100%, но вы также дали ему преимущество. Поля, границы и полосы прокрутки считаются за пределами ширины. This demo поможет вам справиться с этим.

Один из способов исправить это с помощью width: calc(100% - 10px); на элементе #wrap, который будет противостоять левому и правому краям по 5 пикселей каждый, но он несовместим с IE8. Поэтому я предлагаю сделать панель немного меньшей, или положить ее в дополнительную упаковку, которая установлена ​​на 100% ширину, но не имеет полей. Ммм, это не работает. Возможно, есть что-то еще ...