2015-06-02 2 views
0

Я создал список меню. Он прекрасно работает на Chrome и Firefox, но перекос в IE8Проблема с меню CSS в IE8

Chrome Snapshot: - http://postimg.org/image/g6uf9zikr/ chrome snapshot

IE8 Snapshot: - http://postimg.org/image/u6o3pzasz/ IE8 snapshot

Вот мой CSS ------

div.menu { 
 
\t background-color:#383838; 
 
\t height:65px; 
 
\t margin-bottom:20px; 
 
} 
 
div.menu ul { 
 
\t vertical-align:middle; 
 
\t list-style:none; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
div.menu ul li { 
 
\t float:left; 
 
\t display:block; 
 
} 
 
div.menu ul li a { 
 
\t color:#FFFFFF; 
 
\t display:block; 
 
\t float:left; 
 
\t font-family:"Trebuchet MS", Verdana, Arial; 
 
\t font-weight:bold; 
 
\t padding:24px 20px 22px; 
 
\t text-transform:uppercase; 
 
\t text-decoration:none; 
 
} 
 
div.menu ul li a:hover { 
 
\t text-decoration:underline; 
 
\t background-color:#2B2B2B; 
 
} 
 

 
div.menu ul li:hover ul { 
 
\t display:block; 
 
} 
 

 
div.menu ul li ul { 
 
\t vertical-align:middle; 
 
\t text-align:center; 
 
\t float: none; 
 
\t list-style: none; 
 
\t display: none; 
 
\t position:absolute; 
 
\t z-index:999; 
 
\t margin-top:60px; 
 
\t background-color:#383838; 
 
\t opacity:0.8; 
 
} 
 

 
div.menu ul li ul li{ 
 
\t float: none; 
 
\t vertical-align:middle; 
 
\t background-color:#383838; 
 
\t padding:15px; 
 
} 
 
div.menu ul li ul li a { 
 
\t color:#FFFFFF; 
 
\t font-family:"Trebuchet MS", Verdana, Arial; 
 
\t font-weight:bold; 
 
\t text-transform:uppercase; 
 
\t padding:0px; 
 
} 
 
div.menu ul li ul li a:hover { 
 
\t text-decoration:underline; 
 
} 
 

 
div.menu ul li ul li:hover{ 
 
\t background-color:#2B2B2B; 
 
\t opacity:1.0; 
 
}
<div class="menu"> 
 
<ul> 
 
<li><a href="index.php"> HOME </a></li> 
 
<li><a href="">CONTROLLER</a> 
 
<ul> 
 
<li><a href=""> CONTROLLER-1</a></li> 
 
<li><a href=""> CONTROLLER-2</a></li> 
 
</ul></li> 
 
<li><a href="">IOS BPL ZIO</a> 
 
<ul> 
 
<li><a href=""> IOS BPL ZIO-1</a></li> 
 
<li><a href=""> IOS BPL ZIO-2</a></li> 
 
</ul></li> 
 
</ul> 
 
</div>

Пожалуйста, помогите мне решить проблему.

+2

Пожалуйста, ваши HTML, а также. Если бы исполняемый фрагмент кода действительно выполнялся, это было бы здорово. – GolezTrol

+0

HTML - http://justpaste.it/lici – user3828862

+0

В следующий раз, пожалуйста, отредактируйте его в своем вопросе. Я сделал это сейчас. – GolezTrol

ответ

0

Удалите float: left из ссылок в меню. Это заставит эти ссылки заполнить всю строку, а рядом с ней не будет показано подменю ul.

Чтобы устранить этот пробел, который вызывает, удалите margin-top из подменю ul.

Это должно сделать трюк, хотя у меня нет IE8 под рукой, чтобы проверить его.

div.menu { 
 
\t background-color:#383838; 
 
\t height:65px; 
 
\t margin-bottom:20px; 
 
} 
 
div.menu ul { 
 
\t vertical-align:middle; 
 
\t list-style:none; 
 
\t margin:0; 
 
\t padding:0; 
 
} 
 
div.menu ul li { 
 
\t float:left; 
 
\t display:block; 
 
} 
 
div.menu ul li a { 
 
\t color:#FFFFFF; 
 
\t display:block; 
 
\t font-family:"Trebuchet MS", Verdana, Arial; 
 
\t font-weight:bold; 
 
\t padding:24px 20px 22px; 
 
\t text-transform:uppercase; 
 
\t text-decoration:none; 
 
} 
 
div.menu ul li a:hover { 
 
\t text-decoration:underline; 
 
\t background-color:#2B2B2B; 
 
} 
 

 
div.menu ul li:hover ul { 
 
\t display:block; 
 
} 
 

 
div.menu ul li ul { 
 
\t vertical-align:middle; 
 
\t text-align:center; 
 
\t float: none; 
 
\t list-style: none; 
 
\t display: none; 
 
\t position:absolute; 
 
\t z-index:999; 
 
\t background-color:#383838; 
 
\t opacity:0.8; 
 
} 
 

 
div.menu ul li ul li{ 
 
\t float: none; 
 
\t vertical-align:middle; 
 
\t background-color:#383838; 
 
\t padding:15px; 
 
} 
 
div.menu ul li ul li a { 
 
\t color:#FFFFFF; 
 
\t font-family:"Trebuchet MS", Verdana, Arial; 
 
\t font-weight:bold; 
 
\t text-transform:uppercase; 
 
\t padding:0px; 
 
} 
 
div.menu ul li ul li a:hover { 
 
\t text-decoration:underline; 
 
} 
 

 
div.menu ul li ul li:hover{ 
 
\t background-color:#2B2B2B; 
 
\t opacity:1.0; 
 
}
<div class="menu"> 
 
<ul> 
 
<li><a href="index.php"> HOME </a></li> 
 
<li><a href="">CONTROLLER</a> 
 
<ul> 
 
<li><a href=""> CONTROLLER-1</a></li> 
 
<li><a href=""> CONTROLLER-2</a></li> 
 
</ul></li> 
 
<li><a href="">IOS BPL ZIO</a> 
 
<ul> 
 
<li><a href=""> IOS BPL ZIO-1</a></li> 
 
<li><a href=""> IOS BPL ZIO-2</a></li> 
 
</ul></li> 
 
</ul> 
 
</div>

+0

Это сработало ..... Спасибо тонне @ GolezTrol – user3828862

Смежные вопросы