мое выпадающее меню сосредоточено в каждом браузере, за исключением IE, и я не могу понять, почему

кажется, что моя панель навигации отлично работает в других браузерах. Когда вы нависаете над домом или архивом, должно появиться небольшое меню. Он сосредоточен на большинстве браузеров, за исключением Internet Explorer. По какой-то причине его больше толкнули вправо.мое выпадающее меню сосредоточено в каждом браузере, за исключением IE, и я не могу понять, почему

это соответствующий код:

nav ul li:hover ul { 
    display: block !important; 
    border-bottom-left-radius: 5px !important; 
    border-bottom-right-radius: 5px !important; 
} 

nav ul li { 
list-style: none; 
display: inline-block; 
text-align: center; 
display:flex; 
justify-content:center; 
-webkit-justify-content:center; 
-moz-justify-content:center; 
-ms-justify-content:center; 
-o-justify-content:center; 
}

<html> 
<head></head> 
    <body> 
    <nav class="navbar-fixed-top"> 
    <ul class="row"> 
    <li class="hidden-xs hidden-sm col-md-4 col-lg-4"> <a href="index.html">Home</a> 
    <ul class="small_sections"> 
    <li> <a id="welcome" href="#welcomeSection"> <h5>top</h5> </a> </li> 
    <li> <a id="classes" href="#classesSection"> <h5>classes</h5> </a> </li> 
    <li> <a id="trainning" href="#trainningSection"> <h5>trainning</h5> </a> </li> 
    <li> <a id="comitee" href="#comiteeSection"> <h5>comitee</h5> </a> </li> 
    <li> <a id="get_involved" href="#get_involvedSection"> <h5>get involved</h5> </a> </li> 
    </ul> </li> 
    <li class="hidden-xs hidden-sm col-md-4 col-lg-4"> <a>Archive</a> 
    <ul> 
    <li> <a href="our_society.html">our society</a> </li> 
    <li> <a href="makes_breaks.html">Makes n breaks</a> </li> 
    </ul> </li> 
    <li class="hidden-xs hidden-sm col-md-4 col-lg-4"> <a href="#">Events</a> </li> 
    <li class="hidden-md hidden-lg row"> 

    <div class="col-xs-4 col-sm-4"> <a href="#">menu</a> 
    </div> 

    <div class="col-xs-1 col-sm-1"> 

    <span class="glyphicon glyphicon-align-justify" id="navigate" aria-hidden="true"> 
    </span> 
    </div></li> 
    </ul> </nav> 
    </body> 
</html>

источник

2016-10-18 Tito

IE не поддерживает flexbox. –

есть ли альтернатива? – Tito

Возможно, вам потребуется использовать PolyFill. –

Что-то, как это будет работать на Internet Explorer, а также, и это не требует Flex Box. Хорошо, что это тоже отзывчиво.

* {margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} 
 
a {text-decoration: none;} 
 

 
.menu {display: block; border: 1px solid #999;} 
 
.menu::after {display: block; content: " "; clear: both;} 
 
.menu > li {position: relative; float: left; width: 20%; text-align: center;} 
 
.menu li a {display: block; background-color: #eee; padding: 5px;} 
 
.menu li:hover > a {background-color: #fff;} 
 
.menu ul {position: absolute; left: -1px; right: -1px; display: none; border: 1px solid #999; border-top-color: #fff; margin-top: -1px; z-index: 1;} 
 
.menu li:hover ul {display: block;}

<ul class="menu"> 
 
    <li> 
 
    <a href="">Item 1</a> 
 
    <ul> 
 
     <li><a href="">Sub Item 1</a></li> 
 
     <li><a href="">Sub Item 2</a></li> 
 
     <li><a href="">Sub Item 3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Item 2</a> 
 
    <ul> 
 
     <li><a href="">Sub Item 1</a></li> 
 
     <li><a href="">Sub Item 2</a></li> 
 
     <li><a href="">Sub Item 3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Item 3</a> 
 
    <ul> 
 
     <li><a href="">Sub Item 1</a></li> 
 
     <li><a href="">Sub Item 2</a></li> 
 
     <li><a href="">Sub Item 3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Item 4</a> 
 
    <ul> 
 
     <li><a href="">Sub Item 1</a></li> 
 
     <li><a href="">Sub Item 2</a></li> 
 
     <li><a href="">Sub Item 3</a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="">Item 5</a> 
 
    <ul> 
 
     <li><a href="">Sub Item 1</a></li> 
 
     <li><a href="">Sub Item 2</a></li> 
 
     <li><a href="">Sub Item 3</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Позвольте мне знать, если вам нужно что-то больше.

источник

2016-10-18 15:12:46

мое выпадающее меню сосредоточено в каждом браузере, за исключением IE, и я не могу понять, почему

ответ

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