Menu does not open horizontally in IE

Navigation
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 noticed that it was IE update problem, because in case I was using IE8. I installed IE10 and the application started working correctly in all browsers. Well, I uploaded the Intranet application in IIS and I had the same problem again with the menu. Running local IE10 menus and submenus open right, but on the intranet, by the same IE10, the menu appears vertically. How do I resolve this compatibility issue?

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: " ";
}
    
asked by anonymous 24.10.2014 / 19:00

1 answer

2

X-UA-Compatible IE = EDGE 

<!DOCTYPE HTML>
<html lang="pt-BR">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
</head>

Say it's resolved

    
24.10.2014 / 19:08
How to compare the value within a span / span and trigger an action? About loading Jquery page