1
I always use Chorme to test my application in Asp.net mvc. After finishing, I tested in IE and saw that the menu was opening vertically. I found that it was a problem of updating the IE, because in the case it was using the IE8. I installed the IE10 and the application started to work properly in all browsers. Well, I climbed the application to Intranet on IIS and I had the same problem again in relation to the menu. Running local by IE10 the menus and submenus open right, but on the intranet, by the same IE10, the menu appears vertically. How to solve this compatibility problem?
My menu:
<!DOCTYPE HTML>
<html lang="pt-BR">
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Competências</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Menu1", "Index", "Menu1"")</li>
<li>@Html.ActionLink("Menu2", "Index", "Menu2")</li>
<li>@Html.ActionLink("Menu3", "Index", "Menu3")</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Submenu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("Submenu1", "Index", "Submenu1")</li>
<li>@Html.ActionLink("Submenu2", "Index", "Submenu2")</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > li.disabled > a {
color: #999999;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
color: #999999;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
{
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
background-image: none;
}
.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
This question helped me to solve a problem here too with IE, don’t you think that the title of the question should be changed to problems with IE compatibility? Thanks.
– Marconi