2016-08-23 6 views
0

Ich habe horizontale Menüleiste erstellt, aber auf Mauszeiger zeigt es nicht das Untermenü, es funktioniert perfekt in Google Chrome, aber auf Internet Explorer 11 funktioniert es nicht. Hinweis Ich verwende Struts2 Text-Eigenschaft.Horizontale Menüleiste nicht Hover-Untermenü in IE11

Der Code:

#example { 
 
    width: 100%; /* Spans the width of the page */ 
 
    height: 50px; 
 
    margin: 0; /* Ensures there is no space between sides of the screen and the menu */ 
 
    z-index: 99; /* Makes sure that your menu remains on top of other page elements */ 
 
    position: relative; 
 
    background-color: #366b82; 
 
} 
 
.navbar \t { 
 
    height: 50px; 
 
    padding: 0; 
 
    margin: 0; 
 
    position: absolute; 
 
    border-right: 1px solid #54879d; 
 
} 
 
.navbar li { 
 
    height: auto; 
 
    width: 150px; 
 
    float: left; 
 
    text-align: center; 
 
    list-style: none; 
 
    font: normal bold 12px/1.2em Arial, Verdana, Helvetica; 
 
    padding: 0; 
 
    margin: 0; 
 
    background-color: #366b82; 
 
} 
 
.navbar a { \t \t \t \t \t \t \t 
 
    padding: 18px 0; 
 
    border-left: 1px solid #54879d; 
 
    border-right: 1px solid #1f5065; 
 
    text-decoration: none; 
 
    color: white; 
 
    display: block; 
 
} 
 
.navbar li:hover, a:hover { 
 
    background-color: #54879d; 
 
} 
 
.navbar li ul { 
 
    display: none; 
 
    height: auto; \t \t \t \t \t \t \t \t \t 
 
    margin: 0; 
 
    padding: 0; 
 
} \t \t \t \t 
 
.navbar li:hover ul { 
 
    visibility: visible; 
 
    display: block; 
 
} 
 
.navbar li ul li { 
 
    background-color: #54879d; 
 
} 
 
.navbar li ul li a \t { 
 
    border-left: 1px solid #1f5065; 
 
    border-right: 1px solid #1f5065; 
 
    border-top: 1px solid #74a3b7; 
 
    border-bottom: 1px solid #1f5065; 
 
} 
 
.navbar li ul li a:hover { 
 
    background-color: red; 
 
}

JSP Seite

<div id="example"> 
    <ul class="navbar"> 
    <li><a href="Menu1"><s:text name="Menu1"></s:text></a></li> 
    <li><a href="Menu2"><s:text name="Menu2"></s:text></a> 
     <ul> 
     <li><a href="SubMenu1"><s:text name="SubMenu1"></s:text></a></li> 
     <li><a href="SubMenu2"><s:text name="SubMenu2"></s:text></a></li> 
     <li><a href="SubMenu3"><s:text name="SubMenu3"></s:text></a></li> 
     </ul>   
    </li>  
     <li><a href="#"><s:text name="Menu3"></s:text></a></li>  
    </ul> 
</div> 

Ist alles, was ich nach links oder ich verpasst, die auf Internet anwendbar ist Explorer 11?

+0

Dank @sebastianbrosch zur Bearbeitung Frage erlauben es run.I nicht wissen, dass feature.Thanks Wieder – vicky9988

+0

dies auf IE arbeitet 11 https://jsfiddle.net/69q5fp6e/ –

+0

@DipaliVasani, Sie haben Recht gegeben jsfiddle sind arbeitet an IE11 ... aber in meinem Code ist es nicht.in dieser jsp Seite ich als Header.jsp enthalten und ich bin nicht in der Lage zu verfolgen, ob andere css dies überlappen, aber immer noch zur Vermeidung dieser Ich habe eindeutige ID und Klasse Element CSS aber erstellt kein Glück..und derselbe Code funktioniert in GoogleChrom oder Firefox.Werden Sie wissen, in welchem ​​Fall das passieren kann? – vicky9988

Antwort

0

ich die Lösung hätte, ist Problem mit IE-Kompatibilität

I

<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

in HTML-Seite hinzugefügt und sein Anfang arbeiten !!