ドロップダウンメニューを作りたいがホバーして外した後消えてしまうのを消えないようにしたい。

html
1<nav>
2          <ul>
3            <li><a href="">HOME</a></li>
4            <li><a href="">WORKS</a></li>
5            <li><a href="">MESSAGE</a></li>
6            <li class="pulldown"><a href="">CONCEPT</a>
7              <ul>
8                <li><a href="">コンセプト
9                  </a></li>
10                <li><a href=""> 構造</a></li>
11                <li><a href="">保証</a></li>
12              </ul>
13            </li>
14            <li class="pulldown"><a href="">COMPANY</a>
15              <ul>
16                <li><a href="">社長挨拶
17                  </a></li>
18                <li><a href=""> 設計・営業</a></li>
19                <li><a href="">会社概要</a></li>
20                <li><a href="">アクセス</a></li>
21              </ul>
22            </li>
23            <li><a href="">RECRUIT</a></li>
24            <li><a href="">CONTACT</a></li>
25          </ul>
26        </nav>
27
28ホバーするとドロップダウンメニューが出てくるまではいいのですが、ホバーを外すとリストごと消えてしまうのを消えないようにしたいです。
29

css
1.pulldown ul {
2  width: 150px;
3  display: none;
4  margin-left: -40px;
5  position: absolute;
6}
7

js
1    $(function() {
2
3      $('.pulldown')
4        .mouseover(function(e) {
5          $(this).children().stop().slideDown('fast');
6        })
7        .mouseout(function(e) {
8          $(this).children().stop().slideUp('fast');
9        });
10    });

行動規範の内容に同意します

回答1件

ベストアンサー

$(this).children()だと.pulldownの子要素すべて(aタグも)slideUpしちゃいます。
子要素のulだけslideUpするようにすればaタグは消えません。

jQuery
1$(function() {
2  $('.pulldown')
3    .mouseover(function(e) {
4    $(this).children("ul").stop().slideDown('fast');
5  })
6    .mouseout(function(e) {
7    $(this).children("ul").stop().slideUp('fast');
8  });
9});