これは現時点で私の週の悩みの種です。基本的に、標準リストとコンテンツ ボックスの両方をサブ メニューとして組み合わせた純粋な CSS ドロップ ダウン メニューがあります。特に、各 LI に表示ブロックであるタグがある IE で問題が発生しているため、親 LI を埋める必要があります。そのため、LI の任意の場所にホバーしてクリックすると、リンクがホバーし、アクティブな状態がオンになります。
IE でテキストの上にカーソルを合わせると、ホバー状態のスタイルは問題なく適用されますが、マウスをテキストから離しても LI 内に移動すると、ホバーが常に適用されてから削除されます ( dev.altech-を参照)。 uk.com）。
サブメニューが常にオンとオフがちらつき、サブメニューを見逃す可能性があるため、少し面倒です. これは、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%;}
ここでの支援は大歓迎です
どうもありがとう