###前提・実現したいこと
上記画像のようなヘッダーメニューの下に画像があるWebページを作成していますが、画像と重なったリストメニューが選択できずに困っています。
j-queryを用いて画像のスライドショーと文字のフェードイン効果を付けています。
###HTMLソース
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ChemNet</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="copyright" content="Template Party"> <meta name="description" content="ここにサイト説明を入れます"> <meta name="keywords" content="キーワード1,キーワード2,キーワード3,キーワード4,キーワード5"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.bgswitcher.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".jumbotron").bgswitcher({ images: [ "images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", ], effect: "fade", easing: "swing", interval: 5000, loop: true }); }); </script> </head> <body class="index" id="top"> <div class="container"> <header> <h1>ChemNet<font size="4"> Specialty Chemicals Development Center</font-size></h1> <ul id="dropmenu"> <li><a href="#">年頭方針</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">予約関連</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">社内HPリンク</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">各部屋リンク</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">MANTA</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> </ul> </header> <div class="jumbotron" id="jumbotron"> <h2>ようこそ センターのホームページへ</h2> </div> </div> </body> </html>
###CSSソース
/*見出し*/ .index h1{ margin-left: 20px; color: red; } /*ドロップダウンメニュー*/ #dropmenu{ list-style-type: none;; width: 100%; height: 40px; padding: 0; background: #fff; } #dropmenu li{ position: relative; width: 20%; float: left; margin: 0; padding: 0; text-align: center; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; color: #000; font-size: 14px; border: 2px solid #000; line-height: 1; text-decoration: none; } #dropmenu li:hover > a{ color: #000; background-color: #bce2e8; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li ul{ list-style: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li ul li{ overflow: hidden; width: 100%; height: 0; color: #fff; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; background: #fff; text-align: center; font-size: 12px; font-weight: normal; } #dropmenu li:hover ul li{ overflow: visible; height: 38px; border-top: 1px solid #7c8c0e; border-bottom: 1px solid #616d0b; } #dropmenu li:hover ul li:first-child{ border-top: 0; } #dropmenu li:hover ul li:last-child{ border-bottom: 0; } #dropmenu li:hover ul li:last-child a{ border-radius: 0 0 3px 3px; } /*ジャンボトロン*/ #jumbotron{ width:100%; height:500px; color: #fff; position:relative; background-size: cover; background-repeat:no-repeat; } .jumbotron h2{ font-size: 42px; text-align: center; line-height: 400px; animation: fadeIn 5s ease 0s 1000 normal; -webkit-animation: fadeIn 5s ease 0s 1000 normal; } @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} }
###試したこと
リストメニューが画像の下に隠れてしまっているのかと考え、floatにしてみましたが、効果はありませんでした。原因がわかれば、教えていただきたいと思います。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/04 22:13