こちらを参考にして、親リンクのクリックまでは実現できましたが、マウスオーバーはうまくいきませんでした。
https://webnetamemo.com/coding/bootstrap/201607153139
極力jsを追記しない手段はないものでしょうか…
よろしくお願い申し上げます。
html
1 <nav class="navbar navbar-header navbar-expand-lg"> 2 <div class="collapse navbar-collapse " id="navmenu"> 3 <ul class="navbar-nav w-100 mr-auto"> 4 <li class="nav-item navbar-custom w-100"> 5 <a class="nav-link" href="info.html" style="color: #fff;">親メニュー1<br /><span class="sr-only" style="boader-left:1px solid #fff !important;">(current)</span></a> 6 </li> 7 <li class="nav-item navbar-custom dropdown w-100"> 8 <a class="nav-link dropdown-toggle" href="overview.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #fff;"><span class="parentmenu">親メニュー2</span><b class="caret"></b></a> 9 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 10 <a class="dropdown-item" href="overview.html#tek">子メニュー2-1</a> 11 <div class="dropdown-divider"></div> 12 <a class="dropdown-item" href="overview.html#ark">子メニュー2-2</a> 13 </div> 14 </li> 15 <li class="nav-item navbar-custom w-100"> 16 <a class="nav-link" href="tekinfo.html" style="color: #fff;"親メニュー3<br /><span class="sr-only">(current)</span></a> 17 </li> 18 <li class="nav-item navbar-custom w-100"> 19 <a class="nav-link" href="arkinfo.html" style="color: #fff;">親メニュー4<br /><span class="sr-only">(current)</span></a> 20 </li> 21 <li class="nav-item navbar-custom w-100"> 22 <a class="nav-link" href="bookinfo.html" style="color: #fff;">親メニュー5<span class="sr-only">(current)</span></a> 23 </li> 24 <li class="nav-item navbar-custom dropdown w-100"> 25 <a class="nav-link dropdown-toggle" href="about.html" id="navDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #fff;"><span class="parentmenu">親メニュー6</span></a> 26 <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 27 <a class="dropdown-item" href="about.html#effect">子メニュー6-1</a> 28 <div class="dropdown-divider"></div> 29 <a class="dropdown-item" href="about.html#lineup">子メニュー6-2</a> 30 <div class="dropdown-divider"></div> 31 <a class="dropdown-item" href="about.html#organization">子メニュー6-3</a> 32 <div class="dropdown-divider"></div> 33 <a class="dropdown-item" href="about.html#member">子メニュー6-4</a> 34 <div class="dropdown-divider"></div> 35 <a class="dropdown-item" href="about.html#access">子メニュー6-5</a> 36 <div class="dropdown-divider"></div> 37 <a class="dropdown-item" href="about.html#info">子メニュー6-6</a> 38 <div class="dropdown-divider"></div> 39 <a class="dropdown-item" href="about.html#Document">子メニュー6-7</a> 40 <div class="dropdown-divider"></div> 41 <a class="dropdown-item" href="about.html#ask">子メニュー6-8</a> 42 </div> 43 </li> 44 </ul> 45 </div> 46 </nav>
css
1.navbar { 2 background-color: #2E3091 !important; 3 text-align: center; 4 width: 100%; 5 font-size: 0.9rem; 6 padding: 0; 7} 8 9.navbar-custom { 10 border-right: 1px solid #fff; 11} 12 13ul.nav li.dropdown:hover > ul.dropdown-menu { 14 display: block; 15} 16 17ul li:nth-child(-n + 6) { 18 border-bottom: 1px solid #fff; 19 border-left: 1px solid #fff; 20} 21 22 23.nav-link { 24 margin-top: 5px; 25 margin-bottom: 5px; 26 padding-right: -15px; 27 padding-left: -15px; 28} 29 30.nav-item a:link { 31 color: #000; 32} 33 34.nav-item a:hover { 35 color: #ff9600 !important; 36} 37 38.nav-item .dropdown-item a:link { 39 color: #000000; 40} 41 42.nav-item .dropdown-item a:visited { 43 color: #000000; 44} 45
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。