【html/css】hoverできない!助けてください!

ボタンにカーソルが乗った時にhoverでボタンの下に一覧を表示したいのですが、↓これで実行したら、ボタンだけでなく、一覧の部分の上にカーソルを乗せると一覧が出てきてしまいます。
理由は「cat:hoverでcatクラスに一覧の要素も入っているからだ！」と思い、クラスをbtnにしたら、今度はボタンにカーソルが乗っても反応しなくなりました。
どうすればいいでしょうか?

(ちなみにボタンのcssはbootstrapというフレームワークを使用しております。)

html
1<div class="cat" id="kokusai">
2     <button type="button" class="btn btn-info">国際問題</button>
3     <ul>
4      <li><a href="#">歴史</a></li>
5      <li><a href="#">領土</a></li>
6      <li><a href="#">人権</a></li>
7     </ul>
8    </div>

css
1.cat {
2    display: block;
3    float: left;
4   width: 130px;
5    margin-right: 25px;
6    margin-top:33px;
7    padding: 0px;
8    position: relative;
9}
10.cat ul {
11    position: absolute;
12    background-color: #ccf;
13    width: 150px;
14    opacity: 0;
15    transition: opacity .2s linear;
16    overflow: scroll;
17    height: 150px;
18}
19.cat li {
20    height: 0px;
21    transition: height .2s linear;
22}
23.cat:hover > ul {
24    opacity: 1;
25}
26.cat:hover > ul > li {
27    height: 30px;
28}

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

回答1件

ベストアンサー

こんな感じでどうでしょう？

html
1<div class="cat" id="kokusai">
2  <ul>
3    <li><button type="button" class="btn btn-info">国際問題</button>
4      <ul>
5        <li><a href="#">歴史</a></li>
6        <li><a href="#">領土</a></li>
7        <li><a href="#">人権</a></li>
8      </ul>
9    </li>
10  </ul>
11</div>

css
1.cat {
2    display: block;
3    float: left;
4    width: 130px;
5    margin-right: 25px;
6    margin-top:33px;
7    padding: 0px;
8    position: relative;
9}
10
11.cat li{
12    list-style: none;
13}
14
15.cat li ul {
16    opacity: 0;
17    visibility:hidden;
18}
19
20.cat li > ul {
21    position: absolute;
22    background-color: #ccf;
23    width: 150px;
24    transition: opacity .2s linear;
25    overflow: scroll;
26    height: 150px;
27}
28.cat li {
29    height: 0px;
30    transition: height .2s linear;
31}
32.cat li:hover > ul {
33    opacity: 1;
34    visibility:visible;
35}
36.cat  li:hover > ul > li {
37    height: 30px;
38    visibility:visible;
39}