0

CSSで教えて欲しいことがあります。
HPのグローバルメニューを設定したのですが、ブラウザを小さくするとメニューが消えてしまいます。
widthを%で指定してもそうなってしまいます。
何が原因でしょうか。 原因がわからないため、関係ないところもあるかもしれませんが、コピペします。

#cssmenu {
position: relative;
height: 44px;
width: 90%;
background: #949494;

}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0 auto;
line-height: 1;
z-index: 500;
}
#cssmenu > ul {
position: relative;
display: block;
background: #949494;
height: 32px;
width: 800px;
margin: 0 auto;
}
#cssmenu > ul > li {
display: block;
position: relative;
float: left;
margin: 0 auto;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: Meiryo, Helvetica, sans-serif;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 15px 20px;
color: #ffffff;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffa8ff;
}
#cssmenu li.has-sub::after {
display: block;
content: '';
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 10px;
top: 20px;
border: 5px solid transparent;
border-top-color: #ffffff;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffa8ff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}

質問者が選んだベストソリューション

Yahoo!知恵袋 3789日前