水平菜单栏不在IE11中悬停子菜单

时间:2016-08-23 06:18:10

标签: html css

我创建了水平菜单栏,但鼠标悬停时没有显示子菜单,它在Google Chrome中完美运行,但在Internet Explorer 11上却无法正常工作。 注意 我正在使用Struts2文本属性。

守则:



#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	{
  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 {							
  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;									
  margin: 0;
  padding: 0;
}				
.navbar li:hover ul {
  visibility: visible;  
  display: block;
}
.navbar li ul li {
  background-color: #54879d;
} 
.navbar li ul li a 	{
  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页面

<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>

我遗留的任何内容或遗漏的内容适用于Internet Explorer 11吗?

1 个答案:

答案 0 :(得分:0)

我得到了解决方案,问题在于IE兼容性

我添加了

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

在HTML页面中开始工作!!