我创建了水平菜单栏,但鼠标悬停时没有显示子菜单,它在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;
}

<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吗?
答案 0 :(得分:0)
我得到了解决方案,问题在于IE兼容性
我添加了
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
在HTML页面中开始工作!!