0

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

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

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;
}
2
  • 「ロード時に背景色が表示されない」についてですが、これはどの要素の背景色が表示されないということでしょうか?また、「メガナビゲーション内にカーソルを移動すると色が保持できない」とありますが、この問題はどのように再現が出来るか詳しい手順を教えていただけませんか?
    – supa
    Commented 2019年8月12日 23:30
  • > supa様 ご連絡有難うございます。 > 「ロード時に背景色が表示されない」についてですが、これはどの要素の背景色が表示されないということでしょうか? クラス:"mega_left"に対して、 "height: 310px;"としてますが、 "max-height: 9999px;"、 クラス:"mega_right"も "max-height: 9999px;"とすると "mega_left"側のボックス側の背景が > 「メガナビゲーション内にカーソルを移動すると色が保持できない」とありますが、この問題はどのように再現が出来るか詳しい手順を教えていただけませんか? 【実現したいこと】 "ナビ0001"にマウスオーバーすると、メガナビゲーションが開いている間、"ナビ0001"のみhoverで設定した色を保持したい。 【現状】 "ナビ0001"にマウスオーバーすると"見出し3"や"dammy"がhoverで設定した色に変化する。 Commented 2019年8月13日 1:22

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。