

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

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

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

**HTML**

[code]

    <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>
    
[/code]

**CSS**

[code]

    #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;
    }
    
[/code]


CC BY-SA 4.0
2019-08-12T22:50:22.307
57323
2019-08-13T01:22:49.303
2019-08-12T23:22:28.717
32986
35442
question
html jquery css
メガナビゲーションの高さ、グローバルナビのマウスオーバ時の色について