Skip to main content
書式の整形
ソース リンク
supa
  • 5,399
  • 4
  • 18
  • 41

お世話になっております。
掲題の件で質問させていただきます。
メガナビゲーション内を左右に分けたい場合、以下のコードで実施しましたが高さを固定しないとロード時に背景色が表示されないことがあります。
この場合の回避方法をご教示お願いいたします。
また、グローバルナビのリストにマウスオーバ時に色が変化しますが、メガナビゲーション内にカーソルを移動すると色が保持できません。

liに対してhoverをかけるとliの色は変化せず、コードの配下のdd dtの文字も色が変化してしまいます。

メガナビゲーション内を左右に分けたい場合、以下のコードで実施しましたが高さを固定しないとロード時に背景色が表示されないことがあります。
この場合の回避方法をご教示お願いいたします。
また、グローバルナビのリストにマウスオーバ時に色が変化しますが、メガナビゲーション内にカーソルを移動すると色が保持できません。

よろしくliに対してhoverをかけるとliの色は変化せず、コードの配下のdd dtの文字も色が変化してしまいます。
よろしくお願いいたします。

▽HTML======================================HTML

$(function(){$("#g_nav > ul > li").mouseover(function(){$(this).find(".mdd_inner").stop().slideDown();}).mouseout(function(){$(this).find(".mdd_inner").stop().slideUp();});});
<;nav id="g_nav">
  <ul;head>
    <;li><a href="">ナビ0001<i;script classsrc=";fa fa-angle-down ml_;https://ajax.googleapis.com/ajax/libs/jquery/3.3.10"/jquery.min.js";>;</i>;</ascript>
      <;div;script classtype=";mdd_wrap;text/javascript">
        <div$(function(){ class="mdd_inner">
       $("#g_nav > ul <div> class="mega_leftli";>;).mouseover(function(){
            <div class="m_inn_left$(this).find(";>;
              <p class="f_detail.mdd_inner";>midashi<;/p>).stop().slideDown();
              <h3 class="mb_20">見出し3</h3>}).mouseout(function(){
              <p class="mega_pro_btn$(this).find(";>;ダミーbtn<.mdd_inner";/p>).stop().slideUp();
        });
  });
  </divscript>
          </divhead>
       
    <;div;nav classid=";mega_right;g_nav">
              <;dl;ul>
                <;div;li><a classhref=";m_inn_right";";>
               ナビ0001<i class="fa fa-angle-down <dt>dammy<ml_10"><;/dt>
                  <ddi>;dammy<;<;/dda> 
                  <dd>dammy<;/dd>;div class="mdd_wrap">;
                  <;dd>dammy</dd>;div class="mdd_inner">;
                <;/div>;div class="mega_left">;
                <div class="m_inn_right_left">
                  <dt>dammy<;/dt>
                 ;p <dd>dammyclass="f_detail">midashi</ddp> 
                  <dd>dammy<;h3 class="mb_20">;見出し3</dd>h3>;
                  <;dd>dammy;p class="mega_pro_btn">ダミーbtn</ddp>
                </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>
              </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/li>
                <;div;li><a classhref=";m_inn_right";&quot;&gt;
               ナビ0002<i class="fa fa-angle-down <dt>dammy<ml_10"><;/dt>
                  <ddi>;dammy<;<;/dda> 
                  <;dd>dammy</dd>;div class="mdd_wrap">;
                  <;dd>dammy</dd>;div class="mdd_inner">;
                <;/div>;div class="mega_left">;
                <div class="m_inn_right_left">
                  <;dt>dammy</dt>
                 ;p <dd>dammyclass="f_detail">midashi</ddp> 
                  <dd>dammy<;h3 class="mb_20">見出し3<;/dd>h3>;
                  <;dd>dammy;p class="mega_pro_btn">ダミーbtn</ddp>
                </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>
              </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/li>
                <;div;li><a classhref=";m_inn_right";&quot;&gt;
               ナビ0003<i class="fa fa-angle-down <dt>dammy<ml_10"><;/dt>
                  <ddi>;dammy<;<;/dda> 
                  <;dd>dammy</dd>;div class="mdd_wrap">;
                  <;dd>dammy</dd>;div class="mdd_inner">;
                <;/div>;div class="mega_left">;
                <div class="m_inn_right_left">
                  <dt>dammy<;/dt>
                 ;p <dd>dammyclass="f_detail">midashi</ddp> 
                  <dd>dammy<;h3 class="mb_20">見出し3<;/dd>h3>;
                  <;dd>dammy;p class="mega_pro_btn">ダミーbtn</ddp>
                </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>
              </dl> 
            </div>
          </div>
        </divli>
    </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; }

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;
}

お世話になっております。
掲題の件で質問させていただきます。
メガナビゲーション内を左右に分けたい場合、以下のコードで実施しましたが高さを固定しないとロード時に背景色が表示されないことがあります。
この場合の回避方法をご教示お願いいたします。
また、グローバルナビのリストにマウスオーバ時に色が変化しますが、メガナビゲーション内にカーソルを移動すると色が保持できません。

liに対してhoverをかけるとliの色は変化せず、コードの配下のdd dtの文字も色が変化してしまいます。

よろしくお願いいたします。

▽HTML======================================

$(function(){$("#g_nav > ul > li").mouseover(function(){$(this).find(".mdd_inner").stop().slideDown();}).mouseout(function(){$(this).find(".mdd_inner").stop().slideUp();});});
<;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; }

お世話になっております。
掲題の件で質問させていただきます。

メガナビゲーション内を左右に分けたい場合、以下のコードで実施しましたが高さを固定しないとロード時に背景色が表示されないことがあります。
この場合の回避方法をご教示お願いいたします。
また、グローバルナビのリストにマウスオーバ時に色が変化しますが、メガナビゲーション内にカーソルを移動すると色が保持できません。

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="&quot;&gt;ナビ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="&quot;&gt;ナビ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;
}
ソース リンク

メガナビゲーションの高さ、グローバルナビのマウスオーバ時の色について

お世話になっております。
掲題の件で質問させていただきます。
メガナビゲーション内を左右に分けたい場合、以下のコードで実施しましたが高さを固定しないとロード時に背景色が表示されないことがあります。
この場合の回避方法をご教示お願いいたします。
また、グローバルナビのリストにマウスオーバ時に色が変化しますが、メガナビゲーション内にカーソルを移動すると色が保持できません。

liに対してhoverをかけるとliの色は変化せず、コードの配下のdd dtの文字も色が変化してしまいます。

よろしくお願いいたします。

▽HTML======================================

$(function(){ $("#g_nav > ul > li").mouseover(function(){ $(this).find(".mdd_inner").stop().slideDown(); }).mouseout(function(){ $(this).find(".mdd_inner").stop().slideUp(); }); });
<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; }