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