megamenuのようにメニューを出したい

Question

メガメニューのようにchildrenの要素を出したいのですが、ｊqueryでの書き方が分からないのでどなたかご教授いただけないでしょうか
ナビにのせたら.childrenの要素が出てきて、マウスアウトしたら消えるようにしたいです。

<li class="hogenav"><a href="">ナビ</a>
  <div class="children">
    <ul>
      <li>
        <a href="">
          <div class="image"><img src="hogehoge.jpg" alt=""></div><span>navi</span></a>
      </li>
      <li>
        <a href="">
          <div class="image"><img src="hogehoge.jpg" alt=""></div><span>navi</span></a>
      </li>

    </ul>
  </div>
</li>

Comments

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

jQueryを利用する意義がよくわかりません
スタイルシートではいけませんか？

ちなみに、命題のとおりに書くとこう

.hogenav a+.children{display:none;}
.hogenav a:hover+.children{display:block;}

ですが、これは「ナビ」から離れた瞬間にきえるのchildrenは選べません
hogenavのhoverをベースに表示・非表示を切り替えるとよいでしょう

.hogenav a+.children{display:none;}
.hogenav:hover a+.children{display:block;}

<ul>
<li class="hogenav"><a href="">ナビ</a>
  <div class="children">
    <ul>
      <li>
        <a href="">
          <div class="image"><img src="hogehoge.jpg" alt=""></div><span>navi</span></a>
      </li>
      <li>
        <a href="">
          <div class="image"><img src="hogehoge.jpg" alt=""></div><span>navi</span></a>
      </li>

    </ul>
  </div>
</li>
</ul>