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