###前提・実現したいこと
ドロップダウン部分の表示がされない。
###発生している問題・エラーメッセージ
SEE を押すとドロップダウンの部分が表示されA1・A2の項目が表示されるはずだが、
今ただSEEがリンクとして表示されているだけで押してもドロップダウンメニューが出てこない。
特にエラーは発生していない。
###該当のソースコード
header.htmlに
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="header.css"> <header class="clearfix"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <h1 class="title">WEB SITE</h1> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav top-menu"> <li class="nav-item top-menu-item"> <a class="nav-link icon_head" href="send">SEND</a> </li> <li class="nav-item dropdown top-menu-item"> <a class="nav-link dropdown-toggle icon_head" href="see" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> SEE </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">A1</a> <a class="dropdown-item" href="#">A2</a> </div> </li> <li class="nav-item top-menu-item"> <a class="nav-link" href="know">KNOW</a> </li> </ul> </div> <a class="logout_button" href="logout_view">LOGOUT</a> </nav> </header>
と、header.cssに
* { margin: 0; padding: 0; } header { height: 100px; background-color: blue; align-items: center; display: flex; justify-content: space-between; } ul { display: flex; } .title { color: white; font-size: 70px; display: block; margin-left:40px; margin-bottom:25px; } .top-menu{ margin-top:25px; } .form-inline{ margin-top:12px; } .top-menu-item{ list-style: none; font-size: 17px; display: inline-block; padding:right: 50px; } .icon_head{ display: inline-block; padding-right: 50px; } .fa-plus{ color: white; } .fa-eye{ color: white; } .fa-search{ color: white; } .icon_head { padding: 0 .3em; transition: all .3s; color:white; } .icon_head:hover { color: blue; } .logout_button { display: inline-block; width: 100px; height: 45px; font-size: 15px; background-color: black; color: white; text-align: center; padding: 12px 10px; margin: 10px 10px; border-radius: 6px; }
と書いた。
###試したこと
https://getbootstrap.com/docs/4.0/components/navbar/
をそのまま真似て作ったので何が問題なのか分からない。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/18 14:15
2017/10/18 14:16
2017/10/18 14:35