お世話になっております。 掲題の件で質問させていただきます。 メガナビゲーション内を左右に分けたい場合、以下のコードで実施しましたが高さを固定しないとロード時に背景色が表示されないことがあります。 この場合の回避方法をご教示お願いいたします。 また、グローバルナビのリストにマウスオーバ時に色が変化しますが、メガナビゲーション内にカーソルを移動すると色が保持できません。 # liに対してhoverをかけるとliの色は変化せず、コードの配下のdd dtの文字も色が変化してしまいます。 よろしくお願いいたします。 ▽HTML====================================== <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#g_nav > ul > li").mouseover(function(){ $(this).find(".mdd_inner").stop().slideDown(); }).mouseout(function(){ $(this).find(".mdd_inner").stop().slideUp(); }); }); </script> </head> <nav id="g_nav"> <ul> <li><a href="">ナビ0001<i class="fa fa-angle-down ml_10"></i></a> <div class="mdd_wrap"> <div class="mdd_inner"> <div class="mega_left"> <div class="m_inn_left"> <p class="f_detail">midashi</p> <h3 class="mb_20">見出し3</h3> <p class="mega_pro_btn">ダミーbtn</p> </div> </div> <div class="mega_right"> <dl> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> </dl> </div> </div> </div> </li> <li><a href="">ナビ0002<i class="fa fa-angle-down ml_10"></i></a> <div class="mdd_wrap"> <div class="mdd_inner"> <div class="mega_left"> <div class="m_inn_left"> <p class="f_detail">midashi</p> <h3 class="mb_20">見出し3</h3> <p class="mega_pro_btn">ダミーbtn</p> </div> </div> <div class="mega_right"> <dl> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> </dl> </div> </div> </div> </li> <li><a href="">ナビ0003<i class="fa fa-angle-down ml_10"></i></a> <div class="mdd_wrap"> <div class="mdd_inner"> <div class="mega_left"> <div class="m_inn_left"> <p class="f_detail">midashi</p> <h3 class="mb_20">見出し3</h3> <p class="mega_pro_btn">ダミーbtn</p> </div> </div> <div class="mega_right"> <dl> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> <div class="m_inn_right"> <dt>dammy</dt> <dd>dammy</dd> <dd>dammy</dd> <dd>dammy</dd> </div> </dl> </div> </div> </div> </li> <li><a href="">ナビ0004</a></li> <li><a href="">ナビ0005/006</a></li> </ul> </nav> ====================================== ▽CSS====================================== #g_nav { position: relative; margin-top: 30px; z-index: 3; } #g_nav > ul { display: flex; max-width: 1000px; height: ; margin: 0 auto; list-style: none; } #g_nav > ul > li { display: inline-block; cursor: pointer; width: 100%; padding: 10px 0; color: #000; text-align: center; } .clolrred:hover { color: #eb4a44; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .mdd_wrap { position: absolute; top: 100%; left: 0; width: 100%; } .mdd_wrap .mdd_inner { display: none; width: 100%; max-height: 9999px; margin: 0 auto; background: #fbc1bf; } .m_inn_left { position: absolute; display: block; top: 20px; left: 35%; width: 350px; text-align: left; } .m_inn_left h3 { font-size: 18px; } .f_detail{ font-size: 12px; } p.mega_pro_btn { width: 100px; padding: 8px 25px; text-align: center; color: #fff; background: #eb4a44; } p.mega_pro_btn:hover { opacity: 0.3; } .m_inn_right { float: left; margin-left: 30px; width: 25%; height: 100%; text-align: left; } .m_inn_right dt { padding: 0 10px; color: #000000; background: transparent; border-left: solid 5px #eb4a44; font-size: 14px; margin-bottom: 10px; } .m_inn_right dd { margin-left: 10px; font-size: 12px; padding-left: 20px; margin-bottom: 5px; background: url(../img/common/info-arr1.gif) no-repeat left 5px; } #g_nav li a { color: #000; text-decoration: none; } #g_nav li a:hover { color: #eb4a44; } .mega_left { position: relative; float: left; width: 30%; height: 310px; padding-top: 20px; background-color: #fbc1bf; } .mega_right { float: right; width: 70%; height: 310px; padding-top: 20px; background-color: #fff; } #g_nav { position: relative; margin-top: 30px; z-index: 3; } #g_nav > ul { display: flex; max-width: 1000px; height: ; margin: 0 auto; list-style: none; } #g_nav > ul > li { display: inline-block; cursor: pointer; width: 100%; padding: 10px 0; color: #000; text-align: center; } .clolrred:hover { color: #eb4a44; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .mdd_wrap { position: absolute; top: 100%; left: 0; width: 100%; } .mdd_wrap .mdd_inner { display: none; width: 100%; max-height: 9999px; margin: 0 auto; background: #fbc1bf; } .m_inn_left { position: absolute; display: block; top: 20px; left: 35%; width: 350px; text-align: left; } .m_inn_left h3 { font-size: 18px; } .f_detail{ font-size: 12px; } p.mega_pro_btn { width: 100px; padding: 8px 25px; text-align: center; color: #fff; background: #eb4a44; } p.mega_pro_btn:hover { opacity: 0.3; } .m_inn_right { float: left; margin-left: 30px; width: 25%; height: 100%; text-align: left; } .m_inn_right dt { padding: 0 10px; color: #000000; background: transparent; border-left: solid 5px #eb4a44; font-size: 14px; margin-bottom: 10px; } .m_inn_right dd { margin-left: 10px; font-size: 12px; padding-left: 20px; margin-bottom: 5px; background: url(../img/common/info-arr1.gif) no-repeat left 5px; } #g_nav li a { color: #000; text-decoration: none; } #g_nav li a:hover { color: #eb4a44; } .mega_left { position: relative; float: left; width: 30%; height: 310px; padding-top: 20px; background-color: #fbc1bf; } .mega_right { float: right; width: 70%; height: 310px; padding-top: 20px; background-color: #fff; } ======================================