###前提・実現したいこと
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;
}
}
###試したこと
一行一行消して検証しているつもりなのですが、改善されずに困っています。。。
ご教授お願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/05 08:38