jQueryを使ったプルダウンメニューの作成方法

お世話になっております。今回はjQueryを使ったプルダウンメニューについて助言が欲しくお尋ねいたします。
HTML

               <ul style="list-style:none; width:500px; height:auto; border-radius: 10px;  -webkit-border-radius: 10px; -moz-border-radius: 10px; background-color:#CCC; z-index:18;" id="menu">
                	<li style="display:block;">A
                        <ul style="display:none;" id="header_frame_min">
                            <li>B</li>
                                <ul>
                                    <li>BB</li>
                                    <li>BB</li>
                                </ul>
                            <li>C</li>
                                 <ul>
                                    <li>CC</li>
                                    <li>CC</li>
                                    <li>CC</li>
                                 </ul>
               </ul>
             </li>
                </ul>

    $('#menu li').hover(function(){
        $("#header_frame_min",this).slideToggle("slow");
    });

といったコードになります。具体的にはAをhoverするとBとCが現れ、Bをhoverするとすぐ下にBBの二つが表示されるようなプルダウンメニューを作りたいと思っています。
しかし、今回toggle自体は効いていますが下にslidedownしませんし、displayがul内noneのままになっています。
どうか、よろしくお願いします。

http://makasete-web.net/sample/dropdown/index.html ←を参考に作りました。

yambejp

2017/06/15 07:58

UL-LIの入れ子構造がおかしいです。ULの直下にULは置けません。HTMLのソースを修正下さい

kuroishi

2017/06/15 08:04

ありがとうございます。toggleについては解消しました。二重になっている点の解決策がもしありましたら、教えていただきたいです。

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

回答2件

一応CSSのみでいわゆるhide/showの切り替えはできます

html
1<style>
2ul#u1>li>ul{display:none;}
3ul#u1>li:hover>ul{display:block;}
4ul#u1>li:hover>ul>li>ul{display:none;}
5ul#u1>li>ul>li:hover>ul{display:block;}
6</style>
7<ul id="u1">
8<li>A
9  <ul>
10    <li>B
11    <ul>
12      <li>BB</li>
13      <li>BB</li>
14    </ul>
15    </li>
16    <li>C
17    <ul>
18      <li>CC</li>
19      <li>CC</li>
20      <li>CC</li>
21    </ul>
22    </li>
23  </ul>
24  </li>
25</ul>

投稿2017/06/15 10:25

yambejp

総合スコア114839

ベストアンサー

記事のリンク先載せてくれたところ見ると、「第2階層や第3階層などはできないと思います。」と記載されていました…

一応ドロップダウンメニューを載せておきます

HTML
1<ul id="normal" class="dropmenu">
2  <li><a href="#">menu</a>
3    <ul>
4      <li><a href="#">submenu</a></li>
5      <li><a href="#">submenu</a></li>
6      <li><a href="#">submenu</a></li>
7      <li><a href="#">submenu</a></li>
8    </ul>
9  </li>
10  <li><a href="#">menu</a>
11    <ul>
12      <li><a href="#">submenu</a></li>
13      <li><a href="#">submenu</a></li>
14      <li><a href="#">submenu</a></li>
15    </ul>
16  </li>
17  <li><a href="#">menu</a>
18    <ul>
19      <li><a href="#">submenu</a></li>
20      <li><a href="#">submenu</a></li>
21      <li><a href="#">submenu</a></li>
22    </ul>
23  </li>
24  <li><a href="#">menu</a>
25    <ul>
26      <li><a href="#">submenu</a></li>
27      <li><a href="#">submenu</a></li>
28      <li><a href="#">submenu</a></li>
29      <li><a href="#">submenu</a></li>
30    </ul>
31  </li>
32  <li><a href="#">menu</a>
33    <ul>
34      <li><a href="#">submenu</a></li>
35      <li><a href="#">submenu</a></li>
36      <li><a href="#">submenu</a></li>
37      <li><a href="#">submenu</a></li>
38    </ul>
39  </li>
40</ul>

CSS
1.dropmenu{
2  *zoom: 1;
3  list-style-type: none;
4  width: 960px;
5  margin: 5px auto 30px;
6  padding: 0;
7}
8.dropmenu:before, .dropmenu:after{
9  content: "";
10  display: table;
11}
12.dropmenu:after{
13  clear: both;
14}
15.dropmenu li{
16  position: relative;
17  width: 20%;
18  float: left;
19  margin: 0;
20  padding: 0;
21  text-align: center;
22}
23.dropmenu li a{
24  display: block;
25  margin: 0;
26  padding: 15px 0 11px;
27  background: #8a9b0f;
28  color: #fff;
29  font-size: 14px;
30  line-height: 1;
31  text-decoration: none;
32}
33.dropmenu li ul{
34  list-style: none;
35  position: absolute;
36  z-index: 9999;
37  top: 100%;
38  left: 0;
39  margin: 0;
40  padding: 0;
41}
42.dropmenu li ul li{
43  width: 100%;
44}
45.dropmenu li ul li a{
46  padding: 13px 15px;
47  border-top: 1px solid #7c8c0e;
48  background: #6e7c0c;
49  text-align: left;
50}
51.dropmenu li:hover > a{
52  background: #6e7c0c;
53}
54.dropmenu li a:hover{
55  background: #616d0b;
56}
57#normal li ul{
58  display: none;
59}
60#normal li:hover ul{
61  display: block;
62}