サブメニューをクリックする効果を実現するJavaScript

<div class="メニュー">
 <div class="sign" id="sign"></div>
 <div class="lis" id="lis">
 <ul>
 <li><a href="">1</a></li>
 <li><a href="">2</a></li>
 <li><a href="">3</a></li>
 <li><a href="">4</a></li>
 <li><a href="">5</a></li>
 </ul>
 </div>
</div>

ul{
 パディングインライン開始: 0px;
 }
 。メニュー{
 マージン: 0 自動;
 背景:#0DA795;
 高さ: 40px;
 幅: 600ピクセル;
 }
 。サイン{
 幅: 30ピクセル;
 フロート: 右;
 右マージン: 20px;
 上マージン: 8px;
 高さ: 25px;
 背景: rgba(243,193,63,1.00);
 境界線の半径: 5px;
 位置: 相対的;
 cursor: ポインター; //カーソルを手の形に設定します}
 .lis{
 位置: 絶対;
 上:30px;
 表示: なし;
 }
 .lis ul li{
 リストスタイル: なし;
 幅: 600ピクセル;
 行の高さ: 40px;
 フォントサイズ: 14px;
 テキスト配置: 中央;
 下部境界線: 1px 実線 #565656;
 背景:#EAEDD5;
 }.lis a{
 テキスト装飾: なし;
 色: 黒;
 }
 .lis a:hover{
 色: #0da759;
}

<スクリプト>
 var biaozhi=document.getElementById("サイン");
 var li = document.getElementById("lis");
 biaozhi.onclick=関数(){
 var i = li.style.display;
 if (i=="なし"){
 li.style.display="block";//最初のステートメント}else{
 li.style.display="none"; // 2 番目のステートメント}
 }
</スクリプト>