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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1452閲覧

グローバルナビゲーションのリンクがおかしい理由をご教授願います。(CSS)

punpun

総合スコア7

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2017/08/05 08:20

###前提・実現したいこと
http://xn--rckyc0b3c8ay256enh5a.xyz/
上記サイトにて、グローバルナビを実装したくCSSを書いているのですが、
見たこともないような症状になってしまいます。

###発生している問題・エラーメッセージ
ランキングにマウスオーバーすると、
・ランキングで指定したURLと
・40代で指定したURLが
高速で切り替わり点滅します。
(どちらを押すかは運次第という感じ)

###該当のソースコード
#topmenubtn {
display: none;
}
#topmenubox {
text-align: center;
}
#topmenu {
text-align: center;
padding: 0;
background: url(../img/navi-bg.png) repeat-x center center;
background-size: contain;
}
#topmenu ul {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,Verdana,'MS Pゴシック',sans-serif;
margin: 0 auto;
overflow: hidden;
table-layout: fixed; /メニューの幅を均等に/
width: 1020px;
}
#topmenu li {
float: left;
padding:0 10px;
text-align: center;
width: 180px;
}
#topmenu li a {
background-repeat: no-repeat;
color: #FFF;
font-size: 30px;
padding: 0 15px 0 15px;
text-decoration: none;
}
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
#topmenu li a {
-webkit-background-size: 8px 9px;
background-size: 8px 9px;
display: none;
}
}
#topmenu li a:hover {
color: #c3b8b9;
text-decoration: underline;
display: none;
}
@media screen and (max-width: 899px) {
#topmenu ul {
display: none;
margin: 0;
padding: 0 0 5px;
table-layout: fixed;
width: 100%;
}
#topmenu li {
display: none;
float: none;
width: auto;
}
#topmenu li a {
display: none;
background-position: left 2px;
font-size: 16px;
}
}
@media screen and (max-width: 640px) {
#topmenubtn {
display: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #f095a4;
cursor: pointer;
font-size: 16px;
height: 44px;
padding-top: 21px;
position: absolute;
right: 7px;
text-align: center;
top: 0;
vertical-align: middle;
width: 54px;
z-index: 0;
}
#topmenubtn:before {
display: none;
border-bottom: 8px solid transparent;
border-left: 27px solid #fde3e5;
border-right: 27px solid #fde3e5;
border-top: 44px solid #fde3e5;
content: "";
height: 0;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: -1;
}
#topmenubtn:after {
display: none;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fef1f2), color-stop(100%,#fde3e5));
background: linear-gradient(to bottom, #fef1f2 0%,#fde3e5 100%);
content: "";
height: 44px;
left: 0;
position: absolute;
top: 0;
width: 54px;
z-index: -1;
}
#topmenubtn span {
display: none;
position: relative;
z-index: 0;
}
#topmenubtn span:before,
#topmenubtn span:after {
display: none;
content: "";
height: 4px;
position: absolute;
right: 14px;
top: -13px;
width: 26px;
}
#topmenubtn span:before {
display: none;
border-bottom: 3px solid #f095a4;
border-top: 3px solid #f095a4;
height: 3px;
}
#topmenubtn span:after {
display: none;
border-top: 3px solid #f095a4;
height: 0;
margin-top: 12px;
}
.topmenubtnOn {
display: block !important;
}
#topmenubox {
background-color: #ffffff;
display: none;
overflow: hidden;
}
.menuon {
display: block !important;
}
#topmenu ul {
display: block;
padding: 0;
}
#topmenu li {
border-bottom: 1px solid #efecec;
display: block;
}
#topmenu li:last-child {
border-bottom: none;
}
#topmenu li a {
background-image: none;
display: none;
padding: 8px 30px 8px 10px;
position: relative;
text-align: left;
}
#topmenu li a:before {
display: none;
border-bottom: none;
border-left: none;
border-right: 2px solid #a99a9b;
border-top: 2px solid #a99a9b;
content: "";
height: 5px;
margin-top: -4px;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 5px;
}
}

###試したこと
一行一行消して検証しているつもりなのですが、改善されずに困っています。。。

ご教授お願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

css

1topmenu li a:hover { 2color: #c3b8b9; 3text-decoration: underline; 4display: none; 5}

このdisplay: none;のせいです。
このせいで、
1.「ランキング」にカーソルを乗せる

2.「ランキング」が消える

3.メニューがズレて「40代」にカーソルが乗った状態になる

4.「ランキング」が表示状態、「40代」が非表示状態になる

5.1に戻る

これを高速で繰り返しています。
hoverをきっかけに要素を消す・動かすなどの処理をすると起きる典型的なバグですね。
ひとまずこのdisplay: none;opacity:0.5;にでもして、最終的にどうするのかはあとでゆっくり考えましょう。

投稿2017/08/05 08:35

編集2017/08/05 08:37
zohnam

総合スコア1441

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

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

punpun

2017/08/05 08:38

神さまっ!!!!! 本当にありがとうございました;; 解決いたしました。 説明もとてもわかり易くて、感動です。。。 本当にありがとうございました!!!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問