Bootstrapでナビゲーションバーにドロップダウンをつけたい

Bootstrapで現在サイトを作っているのですが、ドロップダウンをclassで指定しても上手く動きません。どうすればいいか手順を教えていただけませんか？また、現在はクリックするとドロップダウンになるところをカーソルをのせるだけでなるようにするにはどうすればいいですか？

<! DOCTYPE html>
<HTML lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>合同会社</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Bootstrap JavaScript-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="/"><h1>PRECEDE<sub>&reg;</sub></h1></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02"
                aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor02">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">About us<span class="sr-only">(current)</span></a>
                    <ul class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="#">リンクリストＡ１</a>
                        <a class="dropdown-item" href="#">リンクリストＡ２</a>
                        <a class="dropdown-item" href="#">リンクリストＡ３</a>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">News</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Works</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>

</header>
<!--header ここまで-->

　　　   <!--footerここから-->
<footer>
    <div id="footer_navi">
        <h3>Our service</h3>
        <ul>
            <li><a href="hippo.html">HIPPO!</a></li>
            <li><a href="reciept.html">RECEIPT</a></li>
            <li><a href="cloud_idea.html">ClOUD IDEA</a></li>
        </ul>
        <h3>About us</h3>
        <ul>
            <li><a href="members.html">Members</a></li>
            <li><a href="kaisyagaiyou.html">会社概要</a></li>
            <li><a href="mission.html">理念</a></li>
        </ul>
        <h3>News</h3>
        <ul>
            <li><a href="oshirase.html">お知らせ</a></li>
        </ul>
        <h3>Contact</h3>
        <ul>
            <li><a href="otoiawase.html">お問い合わせ</a></li>
        </ul>


    </div>
    <small>&copy; 2018 </small>
</footer>
</body>
</html>

Tomak

2018/01/14 13:35

具体的なHTMLを載せていただけないでしょうか？

SNGin

2018/01/14 13:47

追記しました。よろしくお願いします。

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

回答1件

ベストアンサー

Bootstrap 4とBootstrap 3を混同していませんか？HTMLのクラス名を見る限り質問者さんはBootstrap 4を使用したいのだと思いますが、読み込んでいるJavaScriptファイル(恐らくCSSファイルも)がBootstrap 3のものになっています。ホバー時にドロップダウンを表示するという動作は、以下のようにCSSを追記することで可能です。また、ul要素の子要素としてa要素は許可されていませんので、修正しました。

HTML
1<!DOCTYPE html>
2<HTML lang="ja">
3<head>
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <title>合同会社</title>
9    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
10    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
11    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
12    <style type="text/css">
13        .dropdown:hover > .dropdown-menu {
14            display: block;
15        } /* 追加 */
16    </style>
17</head>
18<body>
19<header>
20    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
21        <a class="navbar-brand" href="/"><h1>PRECEDE<sub>&reg;</sub></h1></a>
22        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02"
23                aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
24            <span class="navbar-toggler-icon"></span>
25        </button>
26
27        <div class="collapse navbar-collapse" id="navbarColor02">
28            <ul class="navbar-nav mr-auto">
29                <li class="nav-item dropdown">
30                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">About us<span class="sr-only">(current)</span></a>
31                    <ul class="dropdown-menu" role="menu">
32                        <li><a class="dropdown-item" href="#">リンクリストＡ１</a></li> <!-- 修正 -->
33                        <li><a class="dropdown-item" href="#">リンクリストＡ２</a></li> <!-- 修正 -->
34                        <li><a class="dropdown-item" href="#">リンクリストＡ３</a></li> <!-- 修正 -->
35                    </ul>
36                </li>
37                <li class="nav-item">
38                    <a class="nav-link" href="#">News</a>
39                </li>
40                <li class="nav-item">
41                    <a class="nav-link" href="#">Works</a>
42                </li>
43                <li class="nav-item">
44                    <a class="nav-link" href="#">Contact</a>
45                </li>
46            </ul>
47            <form class="form-inline my-2 my-lg-0">
48                <input class="form-control mr-sm-2" type="text" placeholder="Search">
49                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
50            </form>
51        </div>
52    </nav>
53</header>
54<footer>
55    <div id="footer_navi">
56        <h3>Our service</h3>
57        <ul>
58            <li><a href="hippo.html">HIPPO!</a></li>
59            <li><a href="reciept.html">RECEIPT</a></li>
60            <li><a href="cloud_idea.html">ClOUD IDEA</a></li>
61        </ul>
62        <h3>About us</h3>
63        <ul>
64            <li><a href="members.html">Members</a></li>
65            <li><a href="kaisyagaiyou.html">会社概要</a></li>
66            <li><a href="mission.html">理念</a></li>
67        </ul>
68        <h3>News</h3>
69        <ul>
70            <li><a href="oshirase.html">お知らせ</a></li>
71        </ul>
72        <h3>Contact</h3>
73        <ul>
74            <li><a href="otoiawase.html">お問い合わせ</a></li>
75        </ul>
76    </div>
77    <small>&copy; 2018</small>
78</footer>
79</body>
80</html>