質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1030閲覧

マウスオーバーのプルダウンが意図しない場所で開いてしまう

141kanae

総合スコア28

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/10/05 01:44

###発生している問題

CSSでプルダウン付きのグローバルナビを作り、下にバナーリンクを設置しました。 そのバナーの上にカーソルを移動すると、 グローバルナビに触っていないのに真上にあるプルダウンが開いてしまい、 邪魔になってしまうので直したいです。

###該当のソースコード

css

1body{ 2 font-size:12px; 3 background-color:#FFFFFF; 4 margin:0; 5 padding:0; 6 font-family:"メイリオ", Osaka, "ヒラギノ角ゴ Pro W3"; 7} 8 9td,th { 10 font-size: 12px; 11 color: #5D4A39; 12 font-family:"メイリオ", Osaka, "ヒラギノ角ゴ Pro W3"; 13} 14 15 16.header_box1{ 17 width:1200px; 18 height:85px; 19 clear:both; 20 margin:0 auto 0 auto; 21 margin-top:10px; 22 } 23 24 25.title{ 26 width:240px; 27 height:60px; 28 float:left;} 29 30 31.title p{ 32 width:240px; 33 height:10px; 34 color:#5B2096; 35 font-size:1em; 36 font-weight: normal; 37 padding-left:15px; 38 letter-spacing:4.5px; 39 margin-bottom:5px; 40 } 41 42 43h1{ 44 width:240px; 45 height:30px; 46 margin:0px; 47 padding-left:5px; 48 float:left; 49} 50 51h1 a{ 52 font-size:2em; 53 line-height:1.3em; 54 color:#5B2095; 55 font-weight:normal; 56 font-family:'Segoe Script','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif; 57 text-decoration:none; 58 59} 60 61h1 a:hover{ 62 font-size:2em; 63 line-height:1.3em; 64 color:#5B2095; 65 font-weight:normal; 66 font-family:'Segoe Script','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック','MS PGothic',sans-serif; 67 text-decoration:none; 68 opacity:0.7; 69} 70 71.brand{ 72width:760px; 73height:85px; 74float:left; 75margin:0; 76padding:0; 77 margin-top:0px; 78 79 } 80 81.header_box2{ 82 width:100%; 83 height:59px; 84 margin:0 auto 0 auto; 85 padding-top:10px; 86 background-color:#5B2095; 87 clear:both; 88 } 89 90 91.header_nav{ 92 width:1200px; 93 height:60px; 94 margin:0 auto 0 auto; 95 padding:0; 96 background-color:#5B2095; 97 clear:both; 98} 99 100.header_nav ul{ 101 width:1200px; 102 display:block; 103 list-style:none; 104 width:auto; 105 height:65px; 106 margin:0 0 0 0; 107 padding:0; 108} 109.header_nav li{ 110 width:173px; 111 display:block; 112 width:auto; 113 height:60px; 114 margin:0 0 0 0; 115 padding:0; 116 float:left; 117} 118 119.header li a{ 120 width:173px; 121 display:block; 122 text-decoration:none; 123 color:#5B2096; 124 width:auto; 125 height:auto; 126 margin:1px 8px 0 0; 127 padding:0; 128} 129.header li a:hover{ 130 width:173px; 131 display:block; 132 text-decoration:none; 133 color:#F7CE2D; 134 width:auto; 135 height:auto; 136 margin:0 8px 0 0; 137 padding:0; 138} 139/* ナビ(会社概要など) */ 140#header{ 141 background-color:#FFFFFF; 142 width:100%; 143 height:120px; 144 margin:0; 145 padding:0; 146} 147 148 149 150.header-line{ 151 background-color:#5B2096; 152 width:100%; 153 height:5px; 154 margin:0; 155 margin-bottom:5px; 156 margin-top:1px; 157 padding:0; 158} 159 160.header-line2{ 161 width:1200px; 162 border-bottom:#5B2096 1px solid; 163 margin:0 auto 0 auto; 164} 165 166 167#header li{ 168 position: relative; 169 width: auto; 170 float: left; 171 margin: 0; 172 padding: 0; 173 background:#ffffff; 174} 175 176#header li a{ 177 font-family:"メイリオ", Osaka, "ヒラギノ角ゴ Pro W3"; 178 display: block; 179 margin: 0; 180 padding:0; 181 color: #5B2096; 182 font-size: 0.9em; 183 font-weight: bold; 184 line-height: 0.9em; 185 text-decoration: none; 186} 187 188#header li:hover > a{ 189 width:auto; 190 background: #EEEEEE; 191 color: #5B2096; 192} 193#header li ul{ 194 list-style: none; 195 position: absolute; 196 top: 100%; 197 left: 0; 198 margin: 0; 199 padding: 0; 200} 201 202#header li ul li{ 203 overflow: hidden; 204 width:173px; 205 height: 0; 206 color: #ffffff; 207 -moz-transition: .2s; 208 -webkit-transition: .2s; 209 -o-transition: .2s; 210 -ms-transition: .2s; 211 transition: .2s; 212} 213#header li ul li a{ 214 padding: 14px 10px; 215 background: #ffffff; 216 text-align: center; 217 font-size: 0.9em; 218 font-weight: normal; 219} 220#header li:hover ul li{ 221 overflow: visible; 222 background: #FFFFFF; 223 height: 37px; 224 border-bottom: 1px solid #5B2096; 225} 226#header li:hover ul li:first-child{ 227 border-top: 0; 228} 229#header li:hover ul li:last-child{ 230 border-bottom: 3px double #5B2096; 231} 232 233 234 235.header_box3{ 236 width:1200px; 237 height:47px; 238 clear:both; 239 margin:0 auto 0 auto; 240 margin-top:10px; 241 } 242 243.h-banner1{ 244width:238px; 245height:47px; 246margin-right:2px; 247margin-bottom:10px; 248float:left; 249} 250 251.h-banner1 img{ 252width:238px; 253 254} 255

html

1<div id="header"> 2 3 <div class="header_box1"> 4 <div class="title"><p>■■■</p><h1><a href="http://www.■■■.co.jp/■■■/" alt="■■■" target="_top">■■■</a></h1></div> 5 <div class="brand"> 6 <a href="" target="_top"><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg"></a> 7 <a href="" target="_top"><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg"></a> 8 <a href="" target="_top"><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg"></a> 9 <a href="" target="_top"><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg"></a></div> 10 </div> 11 12 <div class="header_box2"> 13 <div class="header_nav"> 14 <ul> 15 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg" alt="■■■"></a></li> 16 17 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg" alt="■■■"></a></li> 18 19 <li><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg"> 20 <ul> 21 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 22 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 23 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 24 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 25 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 26 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 27 </ul> 28 </li> 29 <li><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg"> 30 <ul> 31 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 32 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 33 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 34 <li><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 35 </ul> 36 </li> 37 <li><img src="http://www.■■■.ne.jp/gold/■■■/■■■.jpg" alt="■■■"> 38 <ul> 39 <li><a href="http://item.■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 40 <li><a href="http://item.■■■.co.jp/■■■/■■■/■■■/" target="_top">■■■</a></li> 41 </ul> 42 </li> 43 <li><a href="http://item.■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg" alt="■■■"></a></li> 44 45 <li><a href="http://item.■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://www.■■■.ne.jp/■■■/■■■/■■■.jpg" alt="■■■"></a></li> 46</ul> 47 48 </div> </div> 49 50<div class="header-line"></div> 51 52 <div class="header_box3"> 53<div class="h-banner1"><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://■■■.co.jp/■■■/■■■/■■■.gif"></a></div> 54<div class="h-banner1"><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://■■■.co.jp/■■■/■■■/■■■.gif"></a></div> 55<div class="h-banner1"><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://■■■.co.jp/■■■/■■■/■■■.gif"></a></div> 56<div class="h-banner1"><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://■■■.co.jp/■■■/■■■/■■■.gif"></a></div> 57<div class="h-banner1"><a href="http://■■■.co.jp/■■■/■■■/■■■/" target="_top"><img src="http://■■■.co.jp/■■■/■■■/■■■.gif"></a></div> 58 59</div>

何卒直し方をご教授頂けると嬉しいです。
よろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.header_nav ulheight.header_nav ul li ulにも適用されて今の状態になっているので、

css

1.header_nav ul li ul { 2 height: 0; 3}

でとりあえず落ち着くと思います。

cssを扱うときはタグで指定してしまうとこんな感じで思わぬ場所で適用されていたりするので、できる限りclassを振って制御した方がのちのち不具合が起きた時も特定しやすくなりますよ~

投稿2016/10/05 02:05

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

141kanae

2016/10/05 02:19

そんなことになっていたなんて…!orz 横着してついつい書かないで済ませてしまいがちなのですが、 あとの事を考えると、細かく指定したほうがいいですね…! これから実践していきたいと思います! 勉強になりました!有難うございました!^^
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問