0

这一直是我这一周的祸根。基本上我有一个纯 CSS 下拉菜单,它结合了标准列表和内容框作为子菜单。我在 IE 中遇到了麻烦,其中每个 LI 都有一个显示块标签,所以应该填充父 LI。所以我可以悬停并单击 LI 中的任何位置,链接悬停,活动状态处于打开状态。

如果我将鼠标悬停在文本上,则在 IE 中发生的情况是应用悬停状态样式没有问题,但是如果我将鼠标从文本上移开但仍在 LI 内,悬停会不断应用然后删除(请参阅dev.altech-英国网站)。

这有点烦人,因为子菜单一直在闪烁,而且您可能会错过子菜单。这些都不会发生在 FF、chrome、opera、safari 中。

下面是与此相关的 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%;}

这里的任何帮助将不胜感激

非常感谢

4

1 回答 1

0

删除过滤器:progid...等。从 div.navBG ul.navMenu >li > a:hover

于 2013-04-17T12:57:10.913 回答