Question

这一直是我一周的祸根。基本上我有一个纯CSS下拉菜单，它将标准列表和内容框组合为子菜单。我在IE中特别遇到麻烦，其中每个LI都有一个显示块的标签，所以应该填充父LI。所以我能够悬停并点击LI中的任何地方，链接悬停，活动状态开启。

如果我将鼠标悬停在文本上悬停状态样式没有问题，那么IE中发生了什么，但是如果我将鼠标移出文本但仍然在LI中，则悬停将不断被应用然后被移除（请参阅{ {3}}）。

这有点令人讨厌，因为子菜单随后会一直闪烁，也可能会错过子菜单。这些都不会发生在FF，铬，歌剧，野生动物园中。

关于此问题的CSS代码：

div.navBG ul.navMenu {width: 1000px; margin: 0 auto; display: block; padding: 0; height: 35px; text-align: center;}
div.navBG ul.navMenu > li {display: inline-block; list-style: none; position: relative; margin: 0 -4px; padding: 0;}
div.navBG ul.navMenu > li:hover:after {bottom: 0; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; z-index: 999;}
div.navBG ul.navMenu > li:hover:after {border-color: rgba(146, 200, 236, 0); border-bottom-color: #92C8EC; border-width: 10px; left: 50%; margin-left: -10px;}

div.navBG ul.navMenu > li > a {display: block; line-height: 35px; text-align: center; text-decoration: none; font-size: 11px; color: #FFF; height: 100%; width: 100%;}
div.navBG ul.navMenu > li > a:hover {background: -moz-linear-gradient(top,  #162d54 13%, #002d5e 28%, #0f233d 61%); background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#162d54), color-stop(28%,#002d5e), color-stop(61%,#0f233d)); background: -webkit-linear-gradient(top,  #162d54 13%,#002d5e 28%,#0f233d 61%); background: -o-linear-gradient(top,  #162d54 13%,#002d5e 28%,#0f233d 61%); background: -ms-linear-gradient(top,  #162d54 13%,#002d5e 28%,#0f233d 61%); background: linear-gradient(to bottom,  #162d54 13%,#002d5e 28%,#0f233d 61%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#162d54', endColorstr='#0f233d',GradientType=0 )";}
/*div.navBG ul.navMenu > li:hover {background: -moz-linear-gradient(top,  #162d54 13%, #002d5e 28%, #0f233d 61%); background: -webkit-gradient(linear, left top, left bottom, color-stop(13%,#162d54), color-stop(28%,#002d5e), color-stop(61%,#0f233d)); background: -webkit-linear-gradient(top,  #162d54 13%,#002d5e 28%,#0f233d 61%); background: -o-linear-gradient(top,  #162d54 13%,#002d5e 28%,#0f233d 61%); background: -ms-linear-gradient(top,  #162d54 13%,#002d5e 28%,#0f233d 61%); background: linear-gradient(to bottom,  #162d54 13%,#002d5e 28%,#0f233d 61%); -ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#162d54', endColorstr='#0f233d',GradientType=0 )";}*/
div.navBG ul.navMenu > li div.subMenuContainer {max-height: 0; overflow: hidden; padding: 0; position: absolute; top: 35px; visibility: hidden; z-index: 999; width: 270px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);}
div.navBG ul.navMenu > li .rightout {right: -8px;}
div.navBG ul.navMenu > li div.subMenuContainer > ul {background: #92C8EC; list-style: none; margin: 0; padding: 0; white-space: no-wrap; width: 270px; position: relative;}
div.navBG ul.navMenu > li div.subMenuContainer:after {z-index: 9999; bottom: 0; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-bottom-color: #92C8EC; border-width: 15px; left: 50%; margin-left: -15px; border-color: rgba(146, 200, 236, 0);}
div.navBG ul.navMenu > li div.subMenuContainer > ul li {display: block; margin: 0; position: relative; vertical-align: text-top; font-size: 11px;}
div.navBG ul.navMenu > li div.subMenuContainer > ul li h4 {font-weight: 700; background: url(/img/sitewide/icon.png) no-repeat 3px center; color: #003975; font-size: 14px; padding: 7px 0 5px 42px; margin: 0; text-align: left;}
div.navBG ul.navMenu > li div.subMenuContainer > ul li a {color: #FFF; display: block; padding-left: 20px; line-height: 35px; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; font-size: 1em !important; text-align: left;}
div.navBG ul.navMenu > li div.subMenuContainer > ul li a:hover {background: #3C7FAB !important;}
div.navBG ul.navMenu > li:hover div.subMenuContainer {visibility: visible;}
div.navBG ul.navMenu > li:hover .solution {max-height: 300px;}
div.navBG ul.navMenu > li:hover .machines {max-height: 600px;}

/*div.navBG ul.navMenu > li div.navMenuItemPane a.cp, 
div.navBG ul.navMenu > li div.navMenuItemPane a.cp:active, 
div.navBG ul.navMenu > li div.navMenuItemPane a.cp:visited {position: absolute; top: 0; left: 0; bottom: 0; right: 0;}*/
div.navBG ul.navMenu > li:hover div.navMenuItemPaneContainer {max-height: 300px; z-index: 99; height: auto; visibility: visible;}
div.navBG ul.navMenu > li div.navMenuItemPaneContainer {background: #92C8EC; box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); width: 540px; visibility: hidden; left: 0; max-height: 0; overflow: hidden; padding: 0; position: absolute; top: 35px; z-index: 99; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} 
div.navBG ul.navMenu > li div.navMenuItemPaneContainer > ul {width: 540px; margin: 0; padding: 0;}
div.navBG ul.navMenu > li div.navMenuItemPaneContainer > ul li {display: inline; float: left; font-size: 11px; vertical-align: text-top; position: relative;}
div.navBG ul.navMenu > li div.navMenuItemPaneContainer > ul li a {color: #FFF; display: block; padding-left: 20px; line-height: 35px; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; font-size: 1em !important; text-align: left;}
div.navBG ul.navMenu > li div.navMenuItemPaneContainer > ul li a:hover {background: #3C7FAB !important;}
div.navBG ul.navMenu > li div.navMenuItemPaneContainer h4 {font-weight: 700; background: url(/img/sitewide/icon.png) no-repeat 3px center; color: #003975; font-size: 14px; padding: 7px 0 5px 42px; margin: 0; text-align: left;}
#double li {width: 50%;}

非常感谢此处的任何帮助

非常感谢

Answer 1

删除过滤器：progid ...等。来自div.navBG ul.navMenu＆gt; li＆gt; ：悬停

背景颜色和子菜单在IE中不断切换悬停状态

1 个答案: