質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • HTML

    9287questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6015questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4180questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2139questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 1,284

Chihiro1219

score 41

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>

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

<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/

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/21 14:03

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

    キャンセル

  • 2016/05/23 11:54

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

    キャンセル

+1

<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の指定が子要素に影響しないように工夫してみてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/23 11:56

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

    キャンセル

関連した質問

同じタグがついた質問を見る

  • HTML

    9287questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    6015questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    4180questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    2139questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。