メガメニューのドリルダウンメニューで孫を出したい

Question

http://codepen.io/ChihiroTachikawa/pen/pyXdbJ
上記にコードを挙げましたが、メガメニューで下記のように孫メニューを出したく思っています。

liの入れ子が必要になると思うのですが、どうしても一番最後のクーポン～の下に出たりします。
また以下なども試しましたが、マウスを離した際に孫要素が画面に残ったりと課題が残りました。

  <li onclick="obj=document.getElementById('example1').style; obj.display=(obj.display=='none')?'block':'none';"><a style="cursor:pointer;">食品</a>
 

<!-- 折り畳み展開ポインタ -->

<a style="cursor:pointer;" class="open_button"><font color="#fff">▼ 実装例① （クリックで展開します）</font></a>

<!--// 折り畳み展開ポインタ -->
 <style>
 #uresi ul li{
	 background:yellow !important;
 }
 </style>
 
<!-- 折り畳まれ部分 -->

<li id="example1" style="display:none;clear:both;">
	<div id="uresi">
    	
        <dt>お菓子・アイス</dt>
        <dt>うれしい</dt>
	</div>	
</li>

<!--// 折り畳まれ部分 -->
      
</li>
      

上手く子の直下に画像のように孫要素が出てマウスを放すと戻るという仕組みに出来ませんでしょうか。

Answer 1

 <div id="mainsection">
<ul id="dropmenu">
  <li><a href="#"><img src="image/head/navi_chople_logo.png" width="72" height="25" alt=""/>カテゴリ</a>
    <ul>
      <li><a href="#">すべて</a></li>
    
        
      
      <li><a href="#">食品</a>
        <ul>
          <li><a href="#">お菓子</a></li>
          <li><a href="#">アイス</a></li>
        </ul>
      </li>
      <li><a href="#">飲料</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
  <li><a href="#">メニュー</a>
    <ul>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
      <li><a href="#">サブメニュー</a></li>
    </ul>
  </li>
</ul>

		<nav>

#dropmenu{
  position: relative;
  list-style-type: none;
  width: 1000px;
  height: 40px;
  margin:0;
  padding: 0;
  background: #8a9b0f;
  border-bottom: 5px solid #535d09;
  border-radius: 3px 3px 0 0;
}
#dropmenu li{
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#dropmenu img{
	vertical-align:middle;
	margin-top:-10px;
	margin-right:10px;
}
#dropmenu li a{
  display: block;
  margin: 0;
  padding: 15px 0 11px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
}
#dropmenu li ul{
  list-style: none;
/*  position: absolute; */ /*modified */
/*  top: 100%; */ /*modified */
/*  left: 0; */ /*modified */
  margin: 0;
  padding: 0;
  border-radius: 0 0 3px 3px;
}
#dropmenu li ul li{
  overflow: hidden;
  width: 1000px;
  height: 0;
  color: #fff;
  -moz-transition: .2s;
  -webkit-transition: .2s;
  -o-transition: .2s;
  -ms-transition: .2s;
  transition: .2s;
}
#dropmenu li ul li a{
  padding: 13px 15px;
  background: #6e7c0c;
  text-align: left;
  font-size: 12px;
  font-weight: normal;
}
#dropmenu li:hover > a{
  background: #6e7c0c;
  color: #eff7b1;
}
#dropmenu > li:hover > a{
  border-radius: 3px 3px 0 0;
}
#dropmenu li:hover{ /*modified */
  height:auto !important; /*modified */
} /*modified */
#dropmenu li:hover > ul > li{ /*modified */
  overflow: visible; /*modified */
  height: 38px;
  background: #6e7c0c;
  border-top: 1px solid #7c8c0e;
  border-bottom: 1px solid #616d0b;
}
#dropmenu li:hover ul li:first-child{
  border-top: 0;
}
#dropmenu li:hover ul li:last-child{
  border-bottom: 0;
}
#dropmenu li:hover ul li:last-child a{
  border-radius: 0 0 3px 3px;
}

https://jsfiddle.net/19b4eyr6/

なんかおかしいところあるかもしれませんが。
結構疲れました……

Comments

[Lhankor_Mhy]

いま気づいたんですけど、これ「飲料」をクリックするの至難の業ですね。
デザイン仕様変更をおすすめしときます。

[Chihiro1219]

頂いたソースをもとにちょっと改造してみましたが一旦飲料に行くまでには、食品孫メニューを開かないか、開いてもまた食品を押して閉じるしか解決できませんでした。
UI的にもっと他のがよさそうですね。。
色々やっていただいたにも関わらず、デザイン的によろしくない結果になってしまい申し訳ありません。。。
以下がソースです。↓
http://codepen.io/ChihiroTachikawa/pen/pyXdbJ

Answer 2

<ul>
  <li>a</li>
  <li>b</li>
  <li class="parent">c
    <ul class="child">
      <li>x</li>
      <li>y</li>
      <li>z</li>
    </ul>
  </li>
</ul>

htmlをこのような構成にして

.child{
  display: none;
}
.parent:hover>.child{
  display: block;
}

とすればcssだけでも可能です。li:hover未対応のブラウザも対象の場合はJavaScriptで同じことをしてあげれば大丈夫だと思います。

リンク先を拝見したのですが
「JavaScriptのコード」と「htmlコードの孫要素」がないようでしたので孫要素が残ってしまう件に関しては確認できませんが表示を切り替える部分をできるだけ単純化されると良いと思います。

孫要素の表示位置がおかしい件に関しては#dropmenu liと子孫セレクタでfloat:leftが指定されているので子/孫要素のliにもfloatが適用されているあたりが怪しそうです。

#dropmenu>liと子セレクタを使用するか#dropmenu li.parent等と親要素のみにclassを設定するなどして親要素のcssの指定が子要素に影響しないように工夫してみてください。

Comments

[Chihiro1219]

回答ありがとうございます！
無事に子と孫の区別は出来ました。
ただ、孫を触っていると他の子が触れないという課題に次が直面してしまったのでそこを今度は試行錯誤中です。
分かりやすく、単位ごとに説明して頂きありがとうございました！