HTMLメニューの位置付け

Question

私はレスポンシブなメニューを設計していましたが、左側には4つ、右側には4つの要素があります。さて、それは、私はそれが応答し、私はそれがまだ残っているウィンドウのサイズを変更するように正しいものを配置する方法を知らない（https://teamtreehouse.comのような）です。

HTMLは以下の通りです：

<nav id="menu"> 
    <nav id="menucenter"> 
    <ul> 
     <li><a href="index.html">Quién soy?</a></li> 
     <li><a href="index.html">Creatividad</a></li> 
     <li><a href="secondarypages/schedule.html">Acción</a></li> 
     <li><a href="secondarypages/places.html">Servicio</a></li> 
     <li><a href="secondarypages/places.html">Servicio</a></li> <- element I want on the right side 
    </ul> 
    </nav> 
</nav> 

CSSは次のとおりです。

#menu { 
    padding: 5px; 
    background-color: rgb(50,50,50); 
} 

#menucenter { 
    padding: 10px; 
    padding-bottom: 0px; 
    position: relative; 
} 
#menucenter ul { 
    list-style-type: none; 
    margin:0px; 
    padding: 5px; 
    overflow: scroll; 
    background-color: rgb(50,50,50); 
} 

#menucenter li { 
    float: left; 
    padding-bottom:6px; 

} 
#menucenter li.highlight{ 
    top:42px; 
    border-bottom:solid 3px #5CF1B3; 
    border-radius: 2px; 
    position: absolute; 
} 

#menucenter li a { 
    display: inline; 
    color: white; 
    text-align: center; 
    padding: 10px 16px; 
    text-decoration: none; 
    background-color: rgb(50,50,50); 
    border-bottom:solid 1px #00b3b3; 
} 

は、事前にありがとうございます！

Answer 1

ただ、最後の1に

position: absolute; 
top: 15px; 
right: 15px; 

を追加します。必要に応じて上下に調整します。次に例を示します。https://jsfiddle.net/8r74y2vz/あなたにお答えしますか？