どのようにこのメニューコードに反応しますか？ （1人のエキスパート）

Question

私の問題はこのメニューです。私はすべての決断に対して反応できません。たぶんあなたはそれをより良く編集する方法を知っているでしょう、私は応答性（位置、サイズ、テキストサイズ）を得るためにこのメニューを管理することはできません。私は、パーセントまたは他の解決策でサイズと位置を応答したいと思っています。ありがとう、私はあなたの助けを待っています。 Demo codepen

@import url(http://fonts.googleapis.com/css?family=Raleway); 
#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a, 
#cssmenu #menu-button { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#cssmenu:after, 
#cssmenu > ul:after { 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

#cssmenu #menu-button { 
    display: none; 
} 
#cssmenu { 
    width: auto; 
    font-family: Raleway, sans-serif; 
    line-height: 1; 
} 

#cssmenu > ul { 
    width:100%; 
     BACKGROUND-COLOR: RED; 
} 

#cssmenu > ul > li { 
    float: left; 
    -webkit-perspective: 1000%; 
    -moz-perspective: 1000%; 
    perspective: 1000%; 
} 
#cssmenu.align-center > ul { 
    font-size: 0; 
    text-align: center; 
} 
#cssmenu.align-center > ul > li { 
    display: inline-block; 
    float: none; 
} 
#cssmenu.align-right > ul > li { 
    float: right; 
} 
#cssmenu > ul > li > a { 
    padding: 16px 20px; 
    font-size: 14px; 
    color: #ffffff; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    text-decoration: none; 
    background: #c61515; 
    -webkit-transition: all .3s; 
    -moz-transition: all .3s; 
    -o-transition: all .3s; 
    transition: all .3s; 
    -webkit-transform-origin: 50% 0; 
    -moz-transform-origin: 50% 0; 
    transform-origin: 50% 0; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
} 
#cssmenu > ul > li.active > a { 
font-weight: bold; color: #000000; 
} 
#cssmenu > ul > li:hover > a, 
#cssmenu > ul > li > a:hover { 
    color: #dff2fa; 
    -webkit-transform: rotateX(90deg) translateY(-23px); 
    -moz-transform: rotateX(90deg) translateY(-23px); 
    transform: rotateX(90deg) translateY(-23px); 
    -ms-transform: none; 
} 
#cssmenu > ul > li > a::before { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: -1; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 100%; 
    height: 100%; 
    padding: 16px 20px; 
    color: #dff2fa; 
    background: #19799f; 
    content: attr(data-title); 
    -webkit-transition: background 0.3s; 
    -moz-transition: background 0.3s; 
    transition: background 0.3s; 
    -webkit-transform: rotateX(-90deg); 
    -moz-transform: rotateX(-90deg); 
    transform: rotateX(-90deg); 
    -webkit-transform-origin: 50% 0; 
    -moz-transform-origin: 50% 0; 
    transform-origin: 50% 0; 
    -ms-transform: translateY(- -18px); 
} 
#cssmenu > ul > li:hover > a::before, 
#cssmenu > ul > li > a:hover::before { 
    background: #3db2e1; 
} 
#cssmenu.small-screen { 
    width: 100%; 
} 
#cssmenu.small-screen > ul, 
#cssmenu.small-screen.align-center > ul { 
    width: 100%; 
    text-align: left; 
} 
#cssmenu.small-screen > ul > li, 
#cssmenu.small-screen.align-center { 
    float: none; 
    display: block; 
    border-top: 1px solid rgba(100, 100, 100, 0.1); 
} 
#cssmenu.small-screen > ul > li:hover > a, 
#cssmenu.small-screen > ul > li > a:hover { 
    color: #dff2fa; 
    -webkit-transform: none; 
    -moz-transform: none; 
    transform: none; 
    -ms-transform: none; 
} 
#cssmenu.small-screen > ul > li > a::before { 
    display: none; 
} 
#cssmenu.small-screen #menu-button { 
    display: block; 
    padding: 16px 20px; 
    cursor: pointer; 
    font-size: 14px; 
    text-decoration: none; 
    color: #ffffff; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    background: #3db2e1; 
} 
#cssmenu.small-screen #menu-button:after { 
    content: ""; 
    position: absolute; 
    right: 20px; 
    top: 17px; 
    display: block; 
    -webkit-box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    box-sizing: content-box; 
    border-top: 2px solid #ffffff; 
    border-bottom: 2px solid #ffffff; 
    width: 22px; 
    height: 3px; 
} 
#cssmenu.small-screen #menu-button.menu-opened:after { 
    border-top: 2px solid #dff2fa; 
    border-bottom: 2px solid #dff2fa; 
} 
#cssmenu.small-screen #menu-button:before { 
    content: ""; 
    position: absolute; 
    right: 20px; 
    top: 27px; 
    display: block; 
    width: 22px; 
    height: 2px; 
    background: #ffffff; 
} 
#cssmenu.small-screen #menu-button.menu-opened:before { 
    background: #dff2fa; 
} 

Answer 1

あなたはWordPressを使用している場合は、応答メニューのいくつかのプラグインを使用することをお勧めですが、それを行うにはないと主張した場合、あなたは@mediaクエリを使用する必要があります。 https://codepen.io/anon/pen/QpwRwr が、私はこのコード変更：

<ul> 
<li class='active'><a href='#'>Home</a></li> 
<li><a href='#'><span>FORUM</span></a></li> 
<li><a href='#'><span>SERVERE</span></a></li> 
<li><a href='#'><span>ASISTENTA</span></a></li> 
</ul> 

をして、これを追加しました：これを見て

@media only screen and (max-width: 479px) { 
    #content ul li span {font-size: 11px} 
    #cssmenu ul li {width:25% } 
    #cssmenu ul li a {padding: 16px 10px 16px 10px} 
} 

この変更は、それはもう少し応答しますが、ポイントは、メディアクエリを使用している、それを使用し、あなたが好きなレイアウトを作成します。しかし、WordPressの場合は、this pluginもご覧ください。