Javascript 我怎样才能使我的汉堡包菜单变小，并且周围有一个完美的圆形边框？

我想把我的汉堡包菜单弄小一些（包括高度和宽度），我试了一段时间，把它弄小了一点，但由于某种原因，我不知道如何把它弄小一点。我也在努力尝试在它周围画一个完美的圆圈。有人能帮我吗？我在一个代码笔中找到了这段代码，并对它进行了一些调整，但我正在努力使它恰到好处

jsfiddle：

JS代码：

类拖动扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
x:这个，道具，x，
y:这个，道具，y，
showmoreoptions弹出窗口：false，
showHelpModal:错误
};
this.reff=React.createRef（）；
this.dragMouseDown=this.dragMouseDown.bind（this）；
this.elementDrag=this.elementDrag.bind（this）；
this.closeDragElement=this.closeDragElement.bind（this）；
this.showmoreoptionspoop=this.showmoreoptionspoop.bind（this）；
}
componentDidMount（）{
这1.pos1=0；
这个.pos2=0；
这1.pos3=0；
这1.4=0；
}
下拉式（e）{
e、 预防默认值（）；
this.pos3=e.clientX；
this.pos4=e.clientY；
document.onmouseup=this.closeDragElement；
document.onmousemove=this.element拖动；
};
元素拖动（e）{
e、 预防默认值（）；
this.pos1=this.pos3-e.clientX；
this.pos2=this.pos4-e.clientY；
this.pos3=e.clientX；
this.pos4=e.clientY；
这是我的国家({
y:this.reff.current.offsetTop-this.pos2+“px”，
x:this.reff.current.offsetLeft-this.pos1+“px”
});
};
closeDragElement（）{
document.onmouseup=null；
document.onmousemove=null；
};
showmoreoptions弹出窗口（）{
这是我的国家({
ShowMoreOptions弹出窗口：！this.state.ShowMoreOptions弹出窗口
});
};
render（）{
返回(
{this.state.showmoreoptions弹出窗口&&(
救命医生

帮助文档2

帮助文档3

)}
);
}
}

css:

#更多选项"按钮{
显示：块；
/*位置：绝对位置*/
宽度：50px；
高度：50px；
/*最高：50%*/
/*左：50%*/
位置：固定；
底部：149px；
右：63px；
光标：指针；
转换：翻译（-50%，-50%）；
z指数：9999；
}
#更多选项按钮。打开div{
背景：无；
}
#更多选项按钮。打开div:before，#更多选项按钮。打开div:after{
排名：0；
}
#更多选项按钮。打开div:before{
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}
#更多选项按钮。打开div:after{
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}
/*#更多选项_按钮：悬停：不（.open）div:before{
顶部：-10px；
}
#更多选项按钮：悬停：非（.open）div:after{
顶部：10px；
} */
#更多选项按钮div，
#更多选项按钮div:before，
#更多选项按钮div:after{
宽度：100%；
高度：4px；
背景：#22222；
-webkit过渡：所有0.4s易用性；
-moz过渡：所有0.4s易用性；
-o型过渡：所有0.4s缓解；
过渡：所有0.4s缓解；
}
#更多选项按钮div{
位置：相对位置；
利润率：20px自动0；
}
#更多选项按钮div:before，div:after{
内容：“；
位置：绝对位置；
}
#更多选项按钮div:before{
顶部：-20px；
}
#更多选项按钮div:after{
顶部：20px；
}
@modalFade关键帧{
来自{transform:translateY（-50%）；不透明度：0；}
到{transform:translateY（0）；不透明度：1；}
}
#更多选项\u弹出窗口{
位置：绝对位置；
/*底部：201px*/
/*右：66px*/
文本对齐：右对齐；
z指数：9999；
动画名称：modalFade；
动画持续时间：.3s；
}
#更多选项{
光标：指针；
}
.更多选项\u图标{
边界半径：50%！重要；
边框：1px纯黑；
高度：1.5雷姆；
宽度：1.5雷姆；
文本对齐：居中；
}
#关闭\u帮助\u模式{
z指数：9999；
}
.帮助\u图标\u ctnr{
显示器：flex；
}
.帮助\u弹出\u网格\u列{
右边界：没有！重要；
}
.帮助\u弹出\u网格\u列{
右边距：1rem；
}

您必须调整所有适当的CSS属性，以获得所需的大小。你将它们分散在许多不同的规则中，并且以一种奇怪的方式使用绝对定位/边距，所以这并不简单，但我做了一个基本的尝试

您需要减少主菜单div的

宽度

，减少其伪元素的

高度

，并减少它们的边距以及用于将其放置在div内的边距，然后添加边框