CSS menus not working as expected in IE11
Quick note: I can't actually see if the answers given to me can be up to next month unfortunately
I have a menu with some submenus (2 levels deep) and all the CSS works in Chrome, but it does not display properly in IE11. What's even weirder is that the same menu completely scrolls when viewed from my local test server and works (almost) perfectly when viewed from a remote server. The problem is with the submenus. when hovering over the top level, the submenu should appear below the top level, but in IE it appears at the top level. You can see an example at http://dev.votob.nl (view in Chrome / Firefox for your desired output).
How can I fix the positioning in IE11?
HTML:
<div class="menu-main-container">
<ul id="menu-main" class="menu">
<li id="menu-item-1"> <a href=#>Item1</a>
</li>
<li id="menu-item-2"> <a href=#>Item2</a>
<ul class="sub-menu">
<li id="menu-item-5"> <a href="#">Sub Item 1</a>
</li>
<li id="menu-item-6"> <a href="#">Sub Item 2</a>
</li>
<li id="menu-item-7"> <a href="#">Sub Item 3</a>
<ul class="sub-menu">
<li id="menu-item-8"> <a href="#">Sub Sub Item 1</a>
</li>
<li id="menu-item-9"> <a href="#">Sub Sub Item 2</a>
</li>
<li id="menu-item-10"> <a href="#">Sub Sub Item 3</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-3"> <a href=#>Item3</a>
</li>
<li id="menu-item-4"> <a href=#>Item4</a>
</li>
</ul>
</div>
CSS
/*top level*/
.menu-main-container > ul {
text-align : left;
display : table;
list-style : none;
text-transform : capitalize;
text-decoration : none;
padding : 0;
margin : 0;
width : 100%;
height : 100%;
}
.menu-main-container ul > li {
text-align : left;
}
.menu-main-container > ul > li {
width: auto;
display : table-cell;
position : relative;
cursor : pointer;
vertical-align : middle;
text-align : center;
}
.menu-main-container ul li a {
text-transform : capitalize;
text-decoration : none;
color : #000000;
font-weight : bold;
font-size : 16px;
}
/*sub menu level 1*/
.menu-main-container > ul > li:hover {
background-color : #003cb3;
}
.menu-main-container > ul > li:hover > a {
color : #fff;
}
.menu-main-container > ul > li > ul {
position : absolute;
top : 100%;
width : 565px;
display : none;
opacity : 0;
visibility : hidden;
background-color : #FFFFFF;
padding : 25px 25px 0px 25px;
}
.menu-main-container > ul > li > ul > li {
display : block;
color : #000000;
width : 50%;
list-style-type : none;
margin-bottom: 25px;
}
.menu-main-container > ul > li > ul > li > a {
}
.menu-main-container > ul > li > ul > li:hover > a {
color : #003399;
}
.menu-main-container > ul > li:hover > ul {
display : block;
opacity : 1;
visibility : visible;
}
/*sub menu positionering*/
.menu-item-256 > ul.sub-menu {
left : -299px;
}
/*sub menu level 2*/
.menu-main-container > ul > li:hover > ul > li > ul {
padding : 25px 25px 0px 25px;
;
position : absolute;
top : 0;
width : 42%;
left : 50%;
margin-left: 0;
display : none;
opacity : 0;
visibility : hidden;
}
.menu-main-container > ul > li > ul > li > ul > li {
list-style-type : none;
}
.menu-main-container > ul > li:hover > ul > li > ul > li {
border : none;
margin-bottom: 25px;
margin-right : 0;
}
.menu-main-container > ul > li:hover > ul > li:hover > ul {
display : block;
opacity : 1;
visibility : visible;
}
.menu-main-container > ul > li:hover > ul > li > ul > li > a {
color : #000000;
}
.menu-main-container > ul > li:hover > ul > li > ul > li:hover > a {
color : #003399;
}
+3
source to share
2 answers
IE may not be able to handle display styles: table (-cell). Try displaying it using regular (inline) blocks:
#menu {
padding: 0;
margin: 0;
white-space: nowrap;
font-size: 0;
position: relative;
}
#menu * {
font-size: 16px;
list-style-type: none;
padding: 0;
margin: 0;
}
#menu a {
text-transform: capitalize;
text-decoration: none;
color: #000;
display: block;
}
#menu > li {
display: inline-block;
width: 20%;
text-align: center;
}
#menu > li ul {
text-align: left;
}
#menu > li:hover {
background: #003cb3;
}
#menu > li:hover > a {
color: #fff;
}
#menu > li > ul {
background: #fff;
display: none;
position: absolute;
left: 0;
right: 0;
padding: 25px 25px 0 25px;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul > li {
margin-bottom: 25px;
width: 50%;
}
#menu ul li:hover > a {
color: #039;
}
#menu > li > ul > li > ul {
display: none;
position: absolute;
left: 50%;
right: 0;
top: 0;
padding: 25px 25px 0 25px;
}
#menu > li > ul > li:hover > ul {
display: block;
}
#menu > li > ul > li > ul > li {
margin-bottom: 25px;
width: 100%;
}
<ul id="menu">
<li><a href="#">item 1</a></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>
<ul>
<li><a href="#">sub sub item 1</a></li>
<li><a href="#">sub sub item 2</a></li>
<li><a href="#">sub sub item 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">login</a></li>
</ul>
<p>Next element</p>
+1
source to share